TarotCard: Animated 3D Flip Card Component

import TarotCard from "@/components/TarotCard";

// Uncontrolled — manages its own flip state
export default function ProjectsPage() {
  return (
    <div className="grid grid-cols-3 gap-8">
      <TarotCard
        delay={0}
        frontContent={
          <div>
            <h3>Project Alpha</h3>
            <p>A full-stack e-commerce platform built with Next.js.</p>
          </div>
        }
      />
      <TarotCard
        delay={0.15}
        frontContent={
          <div>
            <h3>Project Beta</h3>
            <p>Real-time data dashboard powered by WebSockets.</p>
          </div>
        }
      />
    </div>
  );
}

// Controlled — parent owns the flip state
import { useState } from "react";
import TarotCard from "@/components/TarotCard";

export default function ControlledCard() {
  const [flipped, setFlipped] = useState(false);

  return (
    <TarotCard
      isFlipped={flipped}
      onClick={() => setFlipped((prev) => !prev)}
      frontContent={<p>Revealed content goes here.</p>}
    />
  );
}