Audio Player

"use client";

import React, { useState } from "react";
import { Play, Pause, SkipBack, SkipForward, Volume2, Repeat, Music2 } from "lucide-react";

export interface AudioPlayerProps {
  title?: string;
  artist?: string;
}

export function AudioPlayer({
  title = "Aether Dynamics",
  artist = "Monochrome Studio",
}: AudioPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(32);

  return (
    <div className="w-full max-w-sm p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-md">
      <div className="flex items-center gap-3.5 mb-4">
        <div className="w-12 h-12 rounded-xl bg-zinc-900 dark:bg-zinc-100 flex items-center justify-center text-white dark:text-zinc-900 shadow-sm shrink-0">
          <Music2 className="w-5 h-5" />
        </div>
        <div className="min-w-0 flex-1">
          <h4 className="text-xs font-semibold text-zinc-900 dark:text-zinc-100 truncate">{title}</h4>
          <p className="text-[11px] text-zinc-500 dark:text-zinc-400 truncate mt-0.5">{artist}</p>
        </div>
      </div>
    </div>
  );
}

<AudioPlayer
  title="Midnight Reflections"
  artist="Synthetics"
/>

export interface AudioPlayerProps {
  title?: string;
  artist?: string;
}