import { createFileRoute, Link } from "@tanstack/react-router";
import { RecipeCard } from "@/components/recipe-card";
import { useMounted } from "@/components/shell";
import { RECIPES } from "@/lib/recipes";
import { useKitchen } from "@/lib/store";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/favorites")({ component: FavoritesPage });

function FavoritesPage() {
  const mounted = useMounted();
  const ids = useKitchen((s) => s.favorites);
  const list = mounted ? RECIPES.filter((r) => ids.includes(r.id)) : [];

  return (
    <div className="heshel-enter">
      <h1 className="font-display text-4xl font-semibold">পছন্দের রেসিপি</h1>
      <p className="mt-1 text-sm text-muted">যাদের বারবার রান্না হয়, এখানে রাখুন।</p>

      {list.length === 0 ? (
        <div className="mt-10 rounded-[var(--radius-lg)] bg-surface px-6 py-12 text-center shadow-[var(--shadow-border)]">
          <p className="text-ink-soft">এখনো কোনো পছন্দ নেই।</p>
          <Button asChild className="mt-6">
            <Link to="/">ঘুরে দেখুন</Link>
          </Button>
        </div>
      ) : (
        <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {list.map((r) => (
            <RecipeCard key={r.id} recipe={r} />
          ))}
        </div>
      )}
    </div>
  );
}