Animated Card Options

"use client";

import { AnimatedCardOptions, CardOption } from "@/components/ui/animated-card-options";

export default function Demo() {
  const cardOptions: CardOption[] = [
    {
      id: "1",
      icon: "🎵",
      name: "Music Generation"
    },
    {
      id: "2", 
      icon: "🎙️",
      name: "Voice Synthesis"
    },
    {
      id: "3",
      icon: "🎧",
      name: "Audio Enhancement"
    },
    {
      id: "4",
      icon: "🎼",
      name: "Music Composition"
    },
    {
      id: "5",
      icon: "🎤",
      name: "Voice Cloning"
    },
    {
      id: "6",
      icon: "🔊",
      name: "Sound Effects"
    },
    {
      id: "7",
      icon: "🎶",
      name: "Melody Creator"
    },
    {
      id: "8",
      icon: "🎚️",
      name: "Audio Mixing"
    },
    {
      id: "9",
      icon: "🎹",
      name: "Instrument Synthesis"
    },
    {
      id: "10",
      icon: "🎸",
      name: "Guitar Effects"
    },
    {
      id: "11",
      icon: "🥁",
      name: "Drum Programming"
    },
    {
      id: "12",
      icon: "🎺",
      name: "Orchestral Arrangement"
    },
    {
      id: "13",
      icon: "🎻",
      name: "String Section"
    },
    {
      id: "14",
      icon: "🎪",
      name: "Circus Music"
    },
    {
      id: "15",
      icon: "🎭",
      name: "Theatrical Scores"
    },
    {
      id: "16",
      icon: "🎬",
      name: "Film Scoring"
    }
  ];
  
  const handleCardSelect = (option: CardOption) => {
    console.log("Selected:", option.name);
  };

  return (
    <div className="min-h-screen p-8 bg-background text-foreground">
      <div className="container mx-auto py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-primary mb-4">
            AI Audio Tools
          </h1>
          <p className="text-muted-foreground text-lg">
            Choose from our collection of powerful AI-powered audio tools
          </p>
        </div>
        
        <AnimatedCardOptions 
          options={cardOptions}
          columns={4}
          onSelect={handleCardSelect}
        />
      </div>
    </div>
  );
}