Card

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


export default function CardDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Basic Card */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Basic Card</h3>
        <Card className="max-w-md">
          <CardHeader>
            <CardTitle>Card Title</CardTitle>
            <CardDescription>Card description goes here</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-zinc-600 dark:text-zinc-400">
              This is the main content of the card. You can put any content here.
            </p>
          </CardContent>
          <CardFooter className="gap-2">
            <button className="text-sm text-blue-600 hover:underline">Learn more</button>
          </CardFooter>
        </Card>
      </div>

      {/* Pressable Card */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Pressable Card</h3>
        <Card 
          className="max-w-md" 
          isPressable 
          onPress={() => alert("Card clicked!")}
        >
          <CardHeader>
            <CardTitle>Clickable Card</CardTitle>
            <CardDescription>Click me to see the action</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-zinc-600 dark:text-zinc-400">
              This card is pressable. It has hover and active states.
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Cards Grid */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Cards Grid</h3>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {[
            { title: "Feature 1", desc: "Description for feature one", icon: "🚀" },
            { title: "Feature 2", desc: "Description for feature two", icon: "⚡" },
            { title: "Feature 3", desc: "Description for feature three", icon: "🎨" },
          ].map((item, i) => (
            <Card key={i} isPressable onPress={() => {}}>
              <CardContent className="pt-4">
                <div className="text-3xl mb-3">{item.icon}</div>
                <h4 className="font-semibold text-zinc-900 dark:text-zinc-100">{item.title}</h4>
                <p className="text-sm text-zinc-500 mt-1">{item.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Simple Card */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Simple Content Card</h3>
        <Card className="max-w-md p-6">
          <p className="text-zinc-700 dark:text-zinc-300">
            A simple card with just content, no header or footer components.
          </p>
        </Card>
      </div>
    </div>
  )
}