import Image from "next/image";

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

export function Section2() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      <div className="space-y-4">
        <h2 className="text-3xl font-heading">Coffee Menu</h2>
        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Espresso</CardTitle>
                <span className="font-bold">$3.50</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Pure and intense shot of coffee
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Espresso"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Cappuccino</CardTitle>
                <span className="font-bold">$4.50</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Espresso with steamed milk foam
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Cappuccino"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
            </CardContent>
          </Card>
        </div>
      </div>
      <Separator className="my-8" />
      <div className="space-y-4">
        <h2 className="text-3xl font-heading">Food Menu</h2>
        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Avocado Toast</CardTitle>
                <span className="font-bold">$8.99</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Sourdough bread with mashed avocado and seeds
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Avocado Toast"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Croissant</CardTitle>
                <span className="font-bold">$3.99</span>
              </div>
              <CardDescription className="text-muted-foreground">
                Freshly baked butter croissant
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Croissant"
                src="/images/placeholder.png"
                width={300}
                height={200}
                className="rounded-lg object-cover w-full h-48"
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
