import { RevealCard } from "@/components/ui/reveal-card";

export default function BasicUsage() {
  return (
    <RevealCard
      coverImage="/path/to/cover.jpg"
      titleImage="/path/to/title.png"
      characterImage="/path/to/character.png"
      width={266}
      height={400}
    />
  );
}

export function CustomizedCard() {
  return (
    <div className="flex flex-col items-center py-12">
      <div className="relative group">
        <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-400 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
        <RevealCard
          coverImage="/path/to/cover.jpg"
          titleImage="/path/to/title.png"
          characterImage="/path/to/character.png"
          width={300}
          height={450}
          hoverRotation={30}
          titleTranslateY={-60}
          characterTranslateY={-40}
          characterTranslateZ={120}
          gradientColors={{
            top: "rgba(25,25,25,0.8)",
            bottom: "rgba(10,10,10,0.9)",
          }}
          animation={{
            duration: 600,
            delay: 100,
          }}
          alt={{
            cover: "Movie Poster",
            title: "Movie Logo",
            character: "Main Character",
          }}
          threshold={0.4}
          priority={true}
        />
      </div>
    </div>
  );
}