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

interface NavCardProps {
  to: string;
  title: string;
  description: string;
  // Optional trailing slot — used by the hub to surface a small status
  // chip ("3 sessions", "2 connected apps") without dropping the card
  // primitive's clean title/description rhythm.
  meta?: ReactNode;
}

// Shared affordance for the /account hub and related settings hubs.
// Title, helper text, and ChevronRight signal navigation without
// competing with primary actions on the destination page.
export const NavCard = ({ to, title, description, meta }: NavCardProps) => (
  <Link
    to={to}
    className="group flex items-center justify-between gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-5 transition-colors hover:border-zinc-700/60 hover:bg-zinc-800/50 sm:p-6"
  >
    <div className="min-w-0 flex-1">
      <h2 className="text-lg font-semibold text-zinc-100">{title}</h2>
      <p className="mt-1 text-xs text-zinc-500">{description}</p>
    </div>
    <div className="flex shrink-0 items-center gap-3">
      {meta ? <span className="text-xs text-zinc-500">{meta}</span> : null}
      <ChevronRight
        className="h-5 w-5 shrink-0 text-zinc-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-zinc-300"
        aria-hidden="true"
      />
    </div>
  </Link>
);