'use client'

import { SongCard, SongCardProps } from './SongCard'
import { AlbumCard, AlbumCardProps } from './AlbumCard'
import { ArtistCard, ArtistCardProps } from './ArtistCard'

export interface SearchResultsProps {
  query: string
  songs?: SongCardProps[]
  albums?: AlbumCardProps[]
  artists?: ArtistCardProps[]
  isLoading?: boolean
}

export function SearchResults({
  query,
  songs = [],
  albums = [],
  artists = [],
  isLoading = false
}: SearchResultsProps) {
  const hasResults = songs.length > 0 || albums.length > 0 || artists.length > 0

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <div className="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-4" />
        <p className="text-zinc-400">Searching...</p>
      </div>
    )
  }

  if (!hasResults) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center">
        <svg className="w-24 h-24 text-zinc-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <h3 className="text-xl font-semibold text-white mb-2">No results found</h3>
        <p className="text-zinc-400 max-w-md">
          We couldn't find anything for "{query}". Try different keywords or browse by genre.
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-10">
      {/* Songs Section */}
      {songs.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-white">Songs</h2>
            <span className="text-sm text-zinc-400">{songs.length} results</span>
          </div>
          <div className="space-y-2">
            {songs.map(song => (
              <SongCard key={song.id} {...song} />
            ))}
          </div>
        </section>
      )}

      {/* Artists Section */}
      {artists.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-white">Artists</h2>
            <span className="text-sm text-zinc-400">{artists.length} results</span>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {artists.map(artist => (
              <ArtistCard key={artist.id} {...artist} />
            ))}
          </div>
        </section>
      )}

      {/* Albums Section */}
      {albums.length > 0 && (
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-white">Albums</h2>
            <span className="text-sm text-zinc-400">{albums.length} results</span>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {albums.map(album => (
              <AlbumCard key={album.id} {...album} />
            ))}
          </div>
        </section>
      )}
    </div>
  )
}