Disk

import * as React from "react";
import { Disk } from "@/components/ui/disk"; // Import the Disk component
import { cn } from "@/lib/utils"; // Import the cn utility for class merging

// Variant 1: Default Disk with Spotify Integration
export function DemoDefault() {
  return (
    <div className="flex flex-col items-center justify-center p-4 bg-neutral-900 rounded-lg">
      <h2 className="text-lg font-semibold mb-4 text-white">Default Disk (Spotify Integration)</h2>
      <Disk
        isPlaying={true}
        image="https://via.placeholder.com/500"
        name="Song Name"
        artist="Artist Name"
      />
    </div>
  );
}

// Variant 2: Disk with Custom Image and No Animation
export function DemoCustomImage() {
  return (
    <div className="flex flex-col items-center justify-center p-4 bg-neutral-900 rounded-lg">
      <h2 className="text-lg font-semibold mb-4 text-white">Custom Disk (No Animation)</h2>
      <Disk
        isPlaying={false}
        image="https://via.placeholder.com/500"
        name="Custom Song"
        artist="Custom Artist"
      />
    </div>
  );
}

// Variant 3: Disk with Animation and Custom Size
export function DemoCustomSize() {
  return (
    <div className="flex flex-col items-center justify-center p-4 bg-neutral-900 rounded-lg">
      <h2 className="text-lg font-semibold mb-4 text-white">Animated Disk (Custom Size)</h2>
      <div className="w-[300px]">
        <Disk
          isPlaying={true}
          image="https://via.placeholder.com/500"
          name="Animated Song"
          artist="Animated Artist"
        />
      </div>
    </div>
  );
}

// Variant 4: Disk with Custom Class Names
export function DemoCustomClass() {
  return (
    <div className="flex flex-col items-center justify-center p-4 bg-neutral-900 rounded-lg">
      <h2 className="text-lg font-semibold mb-4 text-white">Disk with Custom Class Names</h2>
      <Disk
        isPlaying={true}
        image="https://via.placeholder.com/500"
        name="Custom Class Song"
        artist="Custom Class Artist"
        className="border-4 border-blue-500"
      />
    </div>
  );
}

// Export all demo variants
export { DemoDefault, DemoCustomImage, DemoCustomSize, DemoCustomClass };