"use client";
import { useMusicContext } from "@/components/providers/MusicProvider";
import SongRow from "./SongRow";
import { Search } from "lucide-react";

export default function LibraryView() {
  const { songs, songSearch, setSongSearch } = useMusicContext();
  const captured = songs.filter((s) => s.status === "captured");

  return (
    <div className="p-4">
      <div className="flex items-center gap-3 mb-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
          <input
            type="text"
            placeholder="Search songs..."
            value={songSearch}
            onChange={(e) => setSongSearch(e.target.value)}
            className="w-full pl-10 pr-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-500"
          />
        </div>
        <span className="text-sm text-zinc-500">{captured.length} songs</span>
      </div>
      <div className="space-y-0.5">
        {captured.map((song) => (
          <SongRow key={song.isrc} song={song} showStatus={false} />
        ))}
        {captured.length === 0 && (
          <div className="text-center text-zinc-400 py-12">
            {songSearch ? "No matching songs" : "No songs captured yet. Import a playlist to get started."}
          </div>
        )}
      </div>
    </div>
  );
}
