import type { ReactNode } from "react";
import { Link } from "react-router-dom";

export interface HubReportNavCardProps {
  to: string;
  icon: ReactNode;
  title: string;
  description: string;
}

export default function HubReportNavCard({ to, icon, title, description }: HubReportNavCardProps) {
  return (
    <Link
      to={to}
      className="group bg-[var(--card)] border border-[var(--border)] rounded-xl p-5 flex flex-col gap-2 hover:border-[var(--primary)] hover:shadow-sm transition-all"
    >
      <div className="text-[var(--primary)]">{icon}</div>
      <h3 className="text-base font-semibold text-[var(--foreground)] group-hover:text-[var(--primary)]">
        {title}
      </h3>
      <p className="text-sm text-[var(--muted-foreground)]">{description}</p>
    </Link>
  );
}