import { AppTile } from '#/components/atoms/app-tile.jsx';
import { buttonVariants } from '#/components/atoms/button.jsx';
import { Link } from '#/components/atoms/link.jsx';
import { num } from '#/lib/format.js';
import { cn } from '#/lib/utils.js';

/** A tile linking to one app: its favicon, domain, record and collection counts. */
export function AppCard({ app, href, onNavigate }) {
  return (
    <Link
      href={href}
      onNavigate={onNavigate}
      className={cn(
        buttonVariants({ variant: 'tile', size: 'surface' }),
        'flex flex-col items-stretch gap-0 p-5',
      )}
    >
      <div className="flex items-center gap-3">
        <AppTile domain={app.domain} label={app.domain} size={38} />
        <div className="min-w-0">
          <div className="truncate font-extrabold text-[15px] text-foreground tracking-tight">
            {app.domain}
          </div>
          <div className="truncate text-[11.5px] text-faint">
            {app.collections.length} collection
            {app.collections.length === 1 ? '' : 's'}
          </div>
        </div>
      </div>
      <div className="mt-4 flex items-baseline gap-2">
        <div className="font-extrabold text-[22px] text-foreground tracking-tight">
          {num(app.count)}
        </div>
        <div className="text-[12.5px] text-muted-foreground">
          record{app.count === 1 ? '' : 's'}
        </div>
      </div>
    </Link>
  );
}