import { MajesticCard } from "@/components/ui/majestic-card";

// Basic usage with tilt effect (default)
export default function BasicExample() {
  return (
    <MajesticCard className="w-full max-w-md p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg">
      <h3 className="text-xl font-bold mb-4">Tilt Effect Card</h3>
      <p>
        This card uses the default tilt effect that responds to mouse movement.
      </p>
    </MajesticCard>
  );
}
 
// Float effect with scroll animation
export function FloatExample() {
  return (
    <MajesticCard
      variant="float"
      intensity={4}
      scrollEffect={true}
      className="w-full max-w-md p-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white rounded-xl"
    >
      <h3 className="text-xl font-bold mb-4">Float Effect</h3>
      <p>This card floats and animates as you scroll through the page.</p>
    </MajesticCard>
  );
}
 
// Magnetic effect with custom speed
export function MagneticExample() {
  return (
    <MajesticCard
      variant="magnetic"
      speed="fast"
      className="w-full max-w-md p-6 bg-amber-100 rounded-xl border border-amber-300"
    >
      <h3 className="text-xl font-bold mb-4 text-amber-800">Magnetic Effect</h3>
      <p className="text-amber-700">
        This card has a magnetic effect that pulls toward cursor position.
      </p>
    </MajesticCard>
  );
}
 
// Glow effect with custom color
export function GlowExample() {
  return (
    <MajesticCard
      variant="glow"
      glowColor="#f97316a0" // Custom orange glow
      className="w-full max-w-md p-6 bg-slate-900 text-white rounded-xl"
    >
      <h3 className="text-xl font-bold mb-4">Glow Effect</h3>
      <p>This card has a custom orange glow effect on hover.</p>
    </MajesticCard>
  );
}
 
// With reduced motion for accessibility
export function AccessibleExample() {
  return (
    <MajesticCard
      variant="breathe"
      reduceMotion={true}
      className="w-full max-w-md p-6 bg-emerald-50 rounded-xl border border-emerald-200"
    >
      <h3 className="text-xl font-bold mb-4 text-emerald-800">
        Accessible Card
      </h3>
      <p className="text-emerald-700">
        This card has reduced motion for better accessibility.
      </p>
    </MajesticCard>
  );
}