import { Link } from "@tanstack/react-router";
import { Clock } from "lucide-react";
import type { Recipe } from "@/lib/recipes";
import { bnNum } from "@/lib/utils";

export function RecipeCard({ recipe }: { recipe: Recipe }) {
  return (
    <Link
      to="/recipe/$id"
      params={{ id: recipe.id }}
      className="group flex flex-col overflow-hidden rounded-[var(--radius-lg)] bg-surface shadow-[var(--shadow-border)] transition-[transform,box-shadow] duration-[var(--motion-fast)] ease-[var(--ease-out)] hover:shadow-[var(--shadow-border-hover)]"
    >
      <div className="relative aspect-dish overflow-hidden">
        <img
          src={recipe.image}
          alt={recipe.nameBn}
          className="size-full object-cover transition-transform duration-[var(--motion-slow)] ease-[var(--ease-out)] group-hover:scale-[1.03]"
        />
      </div>
      <div className="flex flex-1 flex-col gap-1 p-3.5">
        <h3 className="font-display text-lg font-semibold text-ink">{recipe.nameBn}</h3>
        <p className="line-clamp-2 text-sm text-muted">{recipe.blurb}</p>
        <p className="mt-auto flex items-center gap-1.5 pt-2 text-xs text-faint">
          <Clock className="size-3.5" />
          <span className="tabular-nums">{bnNum(recipe.timeMin)} মিনিট</span>
          <span aria-hidden>·</span>
          <span>{recipe.difficulty}</span>
        </p>
      </div>
    </Link>
  );
}

export function SpiceDots({ level }: { level: 0 | 1 | 2 | 3 }) {
  return (
    <span className="inline-flex items-center gap-1" aria-label={`ঝাল ${level}`}>
      {[1, 2, 3].map((n) => (
        <span
          key={n}
          className={`size-1.5 rounded-full ${n <= level ? "bg-spice" : "bg-line"}`}
        />
      ))}
    </span>
  );
}