"use client";import { useState } from "react";import { Play, Pause, SkipBack, SkipForward, Volume2, Music } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Slider } from "@/components/ui/slider";const track = {  title: "Summer Breeze",  artist: "The Wavelengths",  duration: 214,};function formatTime(seconds: number) {  const mins = Math.floor(seconds / 60);  const secs = Math.floor(seconds % 60);  return `${mins}:${secs.toString().padStart(2, "0")}`;}export const title = "React Dialog Block Audio Player";export default function DialogAudioPlayer() {  const [open, setOpen] = useState(false);  const [playing, setPlaying] = useState(false);  const [progress, setProgress] = useState(45);  const [volume, setVolume] = useState(80);  const currentTime = (progress / 100) * track.duration;  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Music className="mr-2 h-4 w-4" />            Now Playing          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "320px" }} className="p-0">        <DialogTitle className="sr-only">Audio Player</DialogTitle>        {/* Album art placeholder */}        <div className="aspect-square bg-muted flex items-center justify-center">          <Music className="h-16 w-16 text-muted-foreground" />        </div>        <div className="p-4 space-y-4">          {/* Track info */}          <div className="text-center">            <h3 className="font-medium">{track.title}</h3>            <p className="text-sm text-muted-foreground">{track.artist}</p>          </div>          {/* Progress */}          <div className="space-y-2">            <Slider              value={[progress]}              onValueChange={([v]) => setProgress(v)}              max={100}              step={1}            />            <div className="flex justify-between text-xs text-muted-foreground">              <span>{formatTime(currentTime)}</span>              <span>{formatTime(track.duration)}</span>            </div>          </div>          {/* Controls */}          <div className="flex items-center justify-center gap-2">            <Button variant="ghost" size="icon">              <SkipBack className="h-5 w-5" />            </Button>            <Button              size="icon"              className="h-12 w-12 rounded-full"              onClick={() => setPlaying(!playing)}            >              {playing ? (                <Pause className="h-5 w-5" />              ) : (                <Play className="h-5 w-5 ml-0.5" />              )}            </Button>            <Button variant="ghost" size="icon">              <SkipForward className="h-5 w-5" />            </Button>          </div>          {/* Volume */}          <div className="flex items-center gap-2">            <Volume2 className="h-4 w-4 text-muted-foreground" />            <Slider              value={[volume]}              onValueChange={([v]) => setVolume(v)}              max={100}              step={1}              className="flex-1"            />          </div>        </div>      </DialogContent>    </Dialog>  );}