'use client';

import Image from 'next/image';
import Link from 'next/link';
import PageHeader from '@/components/page-header';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChefHat, ArrowRight, Award, Plus, Star } from 'lucide-react';
import { recipes } from '@/lib/data';
import { Button } from '@/components/ui/button';

const StarRating = ({ rating, label }: { rating: number; label: string }) => (
  <div className="flex flex-col items-center">
    <p className="text-[10px] uppercase font-bold text-muted-foreground mb-1">{label}</p>
    <div className="flex gap-0.5">
      {[...Array(5)].map((_, i) => (
        <Star
          key={i}
          className={`w-3 h-3 ${i < rating ? 'text-yellow-400 fill-yellow-400' : 'text-muted/30'}`}
        />
      ))}
    </div>
  </div>
);

export default function RecetasPage() {
  return (
    <div className="bg-transparent min-h-screen text-foreground">
      <PageHeader
        title="Recetas en Pareja"
        description="Nuestros sabores favoritos y los retos culinarios que hemos superado juntos."
      />

      <main className="container mx-auto px-4 py-8 md:py-10">
        <div className="flex justify-center mb-12">
            <Button asChild size="lg" className="font-headline shadow-xl hover:scale-105 transition-transform px-8">
                <Link href="/recetas/nuevo">
                    <Plus className="mr-2 h-5 w-5" /> Crear Nueva Receta
                </Link>
            </Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {recipes.map((recipe) => (
            <Link href={`/recetas/${recipe.slug}`} key={recipe.id} className="group">
              <Card className="overflow-hidden shadow-lg border bg-card/80 backdrop-blur-sm h-full flex flex-col transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
                 <div className="relative aspect-video w-full">
                    <Image
                      src={recipe.image.src}
                      alt={recipe.image.alt}
                      fill
                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                      data-ai-hint={recipe.image.dataAiHint}
                    />
                 </div>
                <CardHeader>
                  <CardTitle className="font-headline text-lg md:text-xl text-card-foreground">
                    {recipe.title}
                  </CardTitle>
                   <div className="flex items-center text-muted-foreground pt-1 space-x-4">
                        <div className="flex items-center">
                            <ChefHat className="w-4 h-4 mr-2" />
                            <p className="font-body text-xs">{recipe.category}</p>
                        </div>
                        {recipe.memory && (
                            <div className="flex items-center text-primary">
                                <Award className="w-4 h-4 mr-2" />
                                <p className="font-body text-xs line-clamp-1">{recipe.memory}</p>
                            </div>
                        )}
                    </div>
                </CardHeader>
                <CardContent className="flex-grow">
                   <div className="flex justify-around items-center py-4 bg-muted/20 rounded-xl border border-white/20">
                      <StarRating rating={recipe.ratingAnna} label="Anna" />
                      <div className="h-8 w-px bg-border/50"></div>
                      <StarRating rating={recipe.ratingAdri} label="Adri" />
                   </div>
                </CardContent>
                <CardContent>
                   <Button variant="link" className="p-0 font-body text-sm">
                      Ver receta
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                  </Button>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
         {recipes.length === 0 && (
          <div className="max-w-4xl mx-auto text-center">
              <Card className="shadow-lg border-0 bg-card inline-block">
                  <CardHeader>
                      <div className="flex justify-center mb-4">
                          <ChefHat className="w-10 h-10 text-primary" />
                      </div>
                      <CardTitle className="font-headline text-xl text-card-foreground">Próximamente</CardTitle>
                  </CardHeader>
                  <CardContent>
                      <p className="font-body text-sm text-foreground/80">
                          Estamos preparando deliciosas recetas para vosotros. ¡Vuelve pronto!
                      </p>
                  </CardContent>
              </Card>
          </div>
        )}
      </main>
    </div>
  );
}