"use client";

import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { Clock } from "lucide-react";
import { Badge } from "@/components/ui/badge";

type Suggestion = {
  id: string;
  title: string;
  photoUrl: string | null;
  usesExpiring: string[];
};

export function ExpiringSoonSuggestions({ suggestions }: { suggestions: Suggestion[] }) {
  const t = useTranslations("pantry");

  if (suggestions.length === 0) return null;

  return (
    <div className="rounded-xl border p-4 space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="font-semibold flex items-center gap-2">
          <Clock className="h-4 w-4 text-orange-500" />
          {t("expiringSoonSuggestionsTitle")}
        </h2>
        <Link href="/recipes/can-cook" className="text-sm text-primary hover:underline">
          {t("seeAll")}
        </Link>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        {suggestions.map((s) => (
          <Link
            key={s.id}
            href={`/recipes/${s.id}`}
            className="rounded-lg border overflow-hidden hover:bg-accent transition-colors"
          >
            {s.photoUrl ? (
              <div className="relative h-24 w-full">
                <Image src={s.photoUrl} alt={s.title} fill className="object-cover" />
              </div>
            ) : (
              <div className="h-24 w-full bg-muted" />
            )}
            <div className="p-2 space-y-1">
              <p className="text-sm font-medium truncate">{s.title}</p>
              <Badge variant="outline" className="text-orange-500 border-orange-500 gap-1 text-[11px]">
                <Clock className="h-3 w-3" />
                {s.usesExpiring.slice(0, 2).join(", ")}
              </Badge>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}