import { buttonVariants } from '#/components/atoms/button.jsx';
import { Link } from '#/components/atoms/link.jsx';
import { cn } from '#/lib/utils.js';

/** A stat that reads big and links to the section it summarizes. */
export function StatTile({ value, label, href, onNavigate }) {
  return (
    <Link
      href={href}
      onNavigate={onNavigate}
      className={cn(
        buttonVariants({ variant: 'tile', size: 'surface' }),
        'flex flex-col items-start gap-0 whitespace-normal px-3 py-3.5 sm:px-4',
      )}
    >
      <div className="font-extrabold text-[20px] text-foreground leading-none tracking-tight sm:text-[24px]">
        {value}
      </div>
      {/* Reserve two lines so a label that wraps (e.g. "Apps you've used")
          keeps every tile the same height and its label in the same place. */}
      <div className="mt-2 min-h-[2lh] text-[12px] text-muted-foreground leading-snug">
        {label}
      </div>
    </Link>
  );
}