"use client";

import React from "react";
import { Heading } from "./heading";
import { Subheading } from "./subheading";
import { Card } from "./ui/card";

export const Menu = () => {
  const menuItems = [
    {
      name: "Kebab Classique",
      description: "Viande marinée, salade, tomates, oignons, sauce maison",
      price: "12.50 CHF",
    },
    {
      name: "Kebab Poulet",
      description: "Poulet grillé, salade, tomates, oignons, sauce yaourt",
      price: "11.90 CHF",
    },
    {
      name: "Kebab Végétarien",
      description: "Falafels, salade, tomates, oignons, sauce tahini",
      price: "10.50 CHF",
    },
    {
      name: "Durum",
      description: "Viande ou poulet, salade, tomates, oignons, sauce, enroulé dans une galette",
      price: "11.00 CHF",
    },
    {
      name: "Frites",
      description: "Portion de frites maison",
      price: "4.50 CHF",
    },
    {
      name: "Boisson",
      description: "Boisson gazeuse ou eau",
      price: "3.00 CHF",
    },
  ];

  return (
    <div className="relative z-20 py-10 lg:py-20 overflow-hidden">
      <Heading as="h2">Notre Menu</Heading>
      <Subheading className="text-center">
        Découvrez nos délicieux kebabs et accompagnements
      </Subheading>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
        {menuItems.map((item, index) => (
          <Card key={index} className="p-6 hover:shadow-lg transition-shadow duration-300">
            <div className="flex justify-between items-start mb-4">
              <h3 className="text-xl font-semibold">{item.name}</h3>
              <span className="text-lg font-medium">{item.price}</span>
            </div>
            <p className="text-muted-foreground dark:text-muted-dark">{item.description}</p>
          </Card>
        ))}
      </div>
    </div>
  );
};