'use client'

export interface LabelHeaderProps {
  label: {
    id: string
    name: string
    logoUrl?: string
    description?: string
    website?: string
  }
  isOwner?: boolean
  onEdit?: () => void
}

export function LabelHeader({
  label,
  isOwner = false,
  onEdit
}: LabelHeaderProps) {
  return (
    <div className="relative">
      {/* Banner */}
      <div className="h-64 bg-gradient-to-b from-purple-900/50 to-zinc-900 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent" />
      </div>

      {/* Content */}
      <div className="relative -mt-32 px-8">
        <div className="flex items-end gap-6 mb-6">
          {/* Logo */}
          <div className="relative flex-shrink-0">
            <div className="w-48 h-48 rounded-lg overflow-hidden bg-zinc-800 border-4 border-zinc-900 shadow-2xl">
              {label.logoUrl ? (
                <img
                  src={label.logoUrl}
                  alt={label.name}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  <svg className="w-24 h-24 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 000 2h4a1 1 0 100-2H8z" />
                  </svg>
                </div>
              )}
            </div>
          </div>

          {/* Info */}
          <div className="flex-1 pb-4">
            <div className="flex items-center gap-3 mb-2">
              <h1 className="text-5xl font-bold text-white">{label.name}</h1>
            </div>

            {/* Description */}
            {label.description && (
              <p className="mt-4 text-zinc-400 max-w-2xl line-clamp-3">
                {label.description}
              </p>
            )}

            {/* Website Link */}
            {label.website && (
              <a
                href={label.website}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-4 inline-flex items-center gap-2 text-purple-400 hover:text-purple-300 transition"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
                Visit Website
              </a>
            )}

            {/* Edit Button */}
            {isOwner && onEdit && (
              <button
                onClick={onEdit}
                className="mt-6 px-8 py-3 bg-zinc-800 text-white hover:bg-zinc-700 border border-zinc-700 rounded-full font-semibold transition"
              >
                Edit Profile
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}