"use client";
import { cn } from "../shared/utils";
import React from "react";

interface AnimationShowcaseProps {
  className?: string;
}

export const AnimationShowcase = ({ className }: AnimationShowcaseProps) => {
  return (
    <div className={cn("p-8 space-y-8", className)}>
      <h1 className="text-4xl font-bold text-center mb-8 text-foreground">
        Animation Showcase
      </h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {/* First Animation: moveVertical */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Move Vertical</h3>
          <div className="h-32 w-32 mx-auto bg-primary/20 rounded-full animate-first flex items-center justify-center">
            <span className="text-xs text-primary-foreground">animate-first</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            30s ease infinite
          </p>
        </div>

        {/* Second Animation: moveInCircle reverse */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Move In Circle (Reverse)</h3>
          <div className="h-32 w-32 mx-auto bg-secondary/20 rounded-full animate-second flex items-center justify-center">
            <span className="text-xs text-secondary-foreground">animate-second</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            20s reverse infinite
          </p>
        </div>

        {/* Third Animation: moveInCircle linear */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Move In Circle (Linear)</h3>
          <div className="h-32 w-32 mx-auto bg-accent/20 rounded-full animate-third flex items-center justify-center">
            <span className="text-xs text-accent-foreground">animate-third</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            40s linear infinite
          </p>
        </div>

        {/* Fourth Animation: moveHorizontal */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Move Horizontal</h3>
          <div className="h-32 w-32 mx-auto bg-muted/20 rounded-full animate-fourth flex items-center justify-center">
            <span className="text-xs text-muted-foreground">animate-fourth</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            40s ease infinite
          </p>
        </div>

        {/* Fifth Animation: moveInCircle ease */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Move In Circle (Ease)</h3>
          <div className="h-32 w-32 mx-auto bg-destructive/20 rounded-full animate-fifth flex items-center justify-center">
            <span className="text-xs text-destructive-foreground">animate-fifth</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            20s ease infinite
          </p>
        </div>

        {/* Aurora Animation */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-foreground">Aurora Effect</h3>
          <div className="h-32 w-32 mx-auto bg-sidebar-accent/20 rounded-full animate-aurora flex items-center justify-center">
            <span className="text-xs text-sidebar-foreground">animate-aurora</span>
          </div>
          <p className="text-sm text-muted-foreground text-center">
            60s linear infinite
          </p>
        </div>
      </div>

      {/* Animation Details */}
      <div className="mt-12 p-6 bg-muted/20 rounded-lg">
        <h2 className="text-2xl font-bold mb-4 text-foreground">Animation Details</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-muted-foreground">
          <div>
            <h4 className="font-semibold text-foreground mb-2">Keyframe Animations:</h4>
            <ul className="space-y-1">
              <li>• <code className="bg-muted px-1 rounded">moveVertical</code> - Vertical translation</li>
              <li>• <code className="bg-muted px-1 rounded">moveInCircle</code> - 360° rotation</li>
              <li>• <code className="bg-muted px-1 rounded">moveHorizontal</code> - Horizontal translation with Y offset</li>
              <li>• <code className="bg-muted px-1 rounded">aurora</code> - Background position animation</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold text-foreground mb-2">Usage Examples:</h4>
            <ul className="space-y-1">
              <li>• <code className="bg-muted px-1 rounded">animate-first</code> - Smooth vertical movement</li>
              <li>• <code className="bg-muted px-1 rounded">animate-second</code> - Reverse circular motion</li>
              <li>• <code className="bg-muted px-1 rounded">animate-third</code> - Linear circular motion</li>
              <li>• <code className="bg-muted px-1 rounded">animate-fourth</code> - Horizontal movement</li>
              <li>• <code className="bg-muted px-1 rounded">animate-fifth</code> - Smooth circular motion</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};