import type { ReactNode } from "react";
import { Link } from "react-router-dom";
import { Lock } from "lucide-react";
import { useTranslation } from "react-i18next";

export interface HubReportNavCardProps {
  to: string;
  icon: ReactNode;
  title: string;
  description: string;
  /**
   * Show a lock badge on the card (gated feature, license ready and not
   * entitled). The card stays clickable — the gated route renders the upsell.
   */
  locked?: boolean;
}

export default function HubReportNavCard({
  to,
  icon,
  title,
  description,
  locked,
}: HubReportNavCardProps) {
  const { t } = useTranslation();

  return (
    <Link
      to={to}
      className="relative 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"
    >
      {locked && (
        <span
          className="absolute top-4 right-4 text-[var(--muted-foreground)]"
          title={t("nav.locked")}
          aria-label={t("nav.locked")}
          role="img"
        >
          <Lock size={16} aria-hidden="true" />
        </span>
      )}
      <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>
  );
}
