import Image from 'next/image';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { fastFood, koreanFood, drinks, MenuItem } from '@/lib/data';
import { Utensils, Zap, GlassWater } from 'lucide-react';

export default function MenuPage() {

  const FoodGrid = ({ items }: { items: MenuItem[] }) => (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {items.map(item => (
        <Card key={item.id} className="overflow-hidden shadow-lg hover:shadow-accent/20 transition-all duration-300 transform hover:-translate-y-2">
          <CardHeader className="p-0">
            <Image
              src={item.imageUrl}
              alt={`Imagen de ${item.name}`}
              width={400}
              height={300}
              className="w-full h-auto object-cover aspect-[4/3]"
              data-ai-hint={item.imageHint}
            />
          </CardHeader>
          <CardContent className="p-4">
            <CardTitle className="font-headline text-lg line-clamp-1">{item.name}</CardTitle>
            <CardDescription className="mt-1 text-sm line-clamp-2">{item.description}</CardDescription>
          </CardContent>
          <CardFooter className="p-4 pt-0">
             <p className="text-lg font-bold text-primary">S/ {item.price.toFixed(2)}</p>
          </CardFooter>
        </Card>
      ))}
    </div>
  );

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold font-headline tracking-tight">Nuestro Menú</h1>
        <p className="mt-4 text-lg text-muted-foreground">Sabores que acompañan tu diversión.</p>
      </div>

      <Tabs defaultValue="fast-food" className="w-full">
        <TabsList className="grid w-full grid-cols-3 mx-auto max-w-xl h-auto p-2">
          <TabsTrigger value="fast-food" className="py-2 text-md">Comida Rápida</TabsTrigger>
          <TabsTrigger value="korean-food" className="py-2 text-md">Comida Coreana</TabsTrigger>
          <TabsTrigger value="drinks" className="py-2 text-md">Bebidas</TabsTrigger>
        </TabsList>

        <TabsContent value="fast-food" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Zap /> Comida Rápida</h2>
          <FoodGrid items={fastFood} />
        </TabsContent>
        <TabsContent value="korean-food" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Utensils /> Comida Coreana</h2>
          <FoodGrid items={koreanFood} />
        </TabsContent>
        <TabsContent value="drinks" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><GlassWater /> Bebidas</h2>
          <FoodGrid items={drinks} />
        </TabsContent>
      </Tabs>
    </div>
  );
}