'use client'

export interface GenreHeaderProps {
  name: string
  description?: string
  songCount?: number
  coverGradient?: string
}

export function GenreHeader({
  name,
  description,
  songCount,
  coverGradient = 'from-purple-600 to-purple-900'
}: GenreHeaderProps) {
  return (
    <div className={`relative h-80 bg-gradient-to-b ${coverGradient} overflow-hidden`}>
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute inset-0" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          backgroundSize: '60px 60px'
        }} />
      </div>

      {/* Content */}
      <div className="relative h-full flex flex-col justify-end p-8">
        <div className="max-w-4xl">
          <p className="text-sm font-semibold text-white/80 uppercase tracking-wide mb-2">
            Genre
          </p>

          <h1 className="text-7xl font-bold text-white mb-4">
            {name}
          </h1>

          {description && (
            <p className="text-lg text-white/90 mb-4 max-w-2xl line-clamp-2">
              {description}
            </p>
          )}

          {songCount !== undefined && (
            <p className="text-sm text-white/70">
              {songCount.toLocaleString()} {songCount === 1 ? 'song' : 'songs'}
            </p>
          )}
        </div>

        {/* Gradient Overlay */}
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-zinc-900 to-transparent" />
      </div>
    </div>
  )
}