import { MorphingBlob } from "@/components/ui/morphing-blob";

// Basic usage with primary theme
export default function BasicExample() {
  return (
    <MorphingBlob theme="primary" size="md" className="w-64 h-64">
      <div className="text-center p-4">
        <h3 className="text-lg font-bold">Basic Blob</h3>
        <p>Simple morphing blob with default settings</p>
      </div>
    </MorphingBlob>
  );
}
 
// Custom colors with 3D effect
export function CustomColorExample() {
  return (
    <MorphingBlob
      theme="custom"
      customColors={{
        from: "#8A2387",
        via: "#E94057",
        to: "#F27121",
      }}
      size="lg"
      complexity={4}
      effect3D={true}
      className="w-80 h-80"
    >
      <div className="text-center p-6">
        <h3 className="text-xl font-bold mb-2">Custom Gradient</h3>
        <p>Blob with custom gradient colors and 3D effect</p>
      </div>
    </MorphingBlob>
  );
}
 
// Pulsing blob with glow
export function PulsingExample() {
  return (
    <MorphingBlob
      theme="accent"
      size="md"
      pulse={true}
      glow={true}
      glowIntensity={4}
      className="w-72 h-72"
    >
      <div className="text-center p-5">
        <h3 className="text-xl font-bold">Pulsing Effect</h3>
        <p>Blob with pulsing animation and enhanced glow</p>
      </div>
    </MorphingBlob>
  );
}
 
// Feature card with icon
export function FeatureCardExample() {
  return (
    <MorphingBlob
      theme="success"
      size="lg"
      complexity={3}
      speed={2}
      glow={true}
      className="w-64 h-64"
    >
      <div className="text-center p-6">
        <div className="mx-auto mb-3 w-10 h-10">{/* Icon would go here */}</div>
        <h4 className="text-xl font-bold mb-2">Security</h4>
        <p className="text-sm opacity-90 max-w-[180px]">
          Enterprise-grade protection for your applications
        </p>
      </div>
    </MorphingBlob>
  );
}