"use client"

import Image from "next/image"
import Link from "next/link"
import { Play, Pause, SkipForward } from "lucide-react"
import { useState } from "react"

interface MiniPlayerProps {
  track?: {
    title: string
    artist: string
    image: string
  }
}

export function MiniPlayer({
  track = {
    title: "NIGHT DRIVE",
    artist: "Chromatics",
    image: "/night-drive-neon-music.jpg",
  },
}: MiniPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false)

  return (
    <div className="fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-secondary/95 backdrop-blur-lg">
      <div className="mx-auto max-w-md">
        {/* Progress bar */}
        <div className="h-0.5 w-full bg-muted">
          <div className="h-full w-1/3 bg-primary" />
        </div>

        <div className="flex items-center gap-3 p-2">
          <Link href="/now-playing" className="flex flex-1 items-center gap-3">
            <div className="relative h-10 w-10 flex-shrink-0 overflow-hidden rounded-lg">
              <Image src={track.image || "/placeholder.svg"} alt={track.title} fill className="object-cover" />
            </div>
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-medium text-foreground">{track.title}</p>
              <p className="truncate text-xs text-muted-foreground">{track.artist}</p>
            </div>
          </Link>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setIsPlaying(!isPlaying)}
              className="flex h-8 w-8 items-center justify-center rounded-full bg-foreground text-background"
            >
              {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4 ml-0.5" />}
            </button>
            <button className="p-2 text-foreground">
              <SkipForward className="h-5 w-5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
