"use client"

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

interface NowPlayingBarProps {
  title: string
  artist: string
  image: string
  isPlaying?: boolean
  href?: string
}

export function NowPlayingBar({ title, artist, image, isPlaying = false, href = "/now-playing" }: NowPlayingBarProps) {
  const [playing, setPlaying] = useState(isPlaying)

  return (
    <div className="fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-card/95 backdrop-blur-lg">
      <div className="mx-auto flex max-w-md items-center gap-3 px-4 py-2">
        <Link href={href} className="flex flex-1 items-center gap-3">
          <div className="relative h-12 w-12 overflow-hidden rounded-lg">
            <Image src={image || "/placeholder.svg"} alt={title} fill className="object-cover" />
          </div>
          <div className="flex-1">
            <h4 className="text-sm font-medium text-foreground line-clamp-1">{title}</h4>
            <p className="text-xs text-muted-foreground">{artist}</p>
          </div>
        </Link>
        <button
          onClick={() => setPlaying(!playing)}
          className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground"
        >
          {playing ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
        </button>
      </div>
    </div>
  )
}
