import { useState } from "react"import { Pause, Play, SkipBack, SkipForward } from "lucide-react"import { LiquidGlassCard } from "@/components/kokonutui/liquid-glass-card"import { Button } from "@/components/ui/button"export default function LiquidGlassCardDemo() {  const [isPlaying, setIsPlaying] = useState(true)  return (    <LiquidGlassCard className="w-full max-w-sm rounded-3xl border-white/50 bg-white/30 p-5 shadow-xl" glassSize="sm">      <div className="flex items-center gap-4">        <div className="size-16 shrink-0 rounded-2xl bg-gradient-to-br from-violet-300 via-fuchsia-200 to-amber-100 shadow-inner" />        <div className="min-w-0 flex-1">          <p className="truncate font-semibold">Golden Hour</p>          <p className="mt-1 text-sm text-muted-foreground">The Paper Kites</p>        </div>        <span className="size-2 rounded-full bg-emerald-500" />      </div>      <div className="mt-5 space-y-2">        <div className="h-1 overflow-hidden rounded-full bg-black/10">          <div className="h-full w-2/5 rounded-full bg-foreground/70" />        </div>        <div className="flex justify-between text-xs tabular-nums text-muted-foreground">          <span>1:24</span><span>3:42</span>        </div>      </div>      <div className="mt-3 flex items-center justify-center gap-3">        <Button variant="ghost" size="icon" aria-label="Previous track"><SkipBack /></Button>        <Button className="size-10 rounded-full" size="icon" aria-label={isPlaying ? "Pause" : "Play"} onClick={() => setIsPlaying(!isPlaying)}>          {isPlaying ? <Pause /> : <Play />}        </Button>        <Button variant="ghost" size="icon" aria-label="Next track"><SkipForward /></Button>      </div>    </LiquidGlassCard>  )}