'use client';

import React from 'react';

interface HbfcLogoProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  showText?: boolean;
  textColor?: string;
  subtitle?: string;
  className?: string;
  badgeClassName?: string;
}

export function HbfcLogo({
  size = 'md',
  showText = true,
  textColor,
  subtitle = 'Fitness Club • Calabar, Nigeria',
  className = '',
  badgeClassName = '',
}: HbfcLogoProps) {
  const sizeMap = {
    sm: {
      badge: 'w-9 h-9',
      img: 'w-9 h-9',
      title: 'text-sm font-black',
      sub: 'text-[10px]',
    },
    md: {
      badge: 'w-11 h-11',
      img: 'w-11 h-11',
      title: 'text-base font-black',
      sub: 'text-[11px]',
    },
    lg: {
      badge: 'w-14 h-14',
      img: 'w-14 h-14',
      title: 'text-lg font-black',
      sub: 'text-xs',
    },
    xl: {
      badge: 'w-20 h-20',
      img: 'w-20 h-20',
      title: 'text-2xl font-black',
      sub: 'text-sm',
    },
  };

  const currentSize = sizeMap[size];

  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {/* Official Gold & Black Crest Badge */}
      <div
        className={`relative ${currentSize.badge} rounded-xl overflow-hidden bg-black border border-amber-400/50 shadow-md flex-shrink-0 flex items-center justify-center group-hover:scale-105 transition-transform duration-200 ${badgeClassName}`}
      >
        <img
          src="/hbfc-logo.jpg"
          alt="Healthy Billionaires Logo"
          className="w-full h-full object-contain p-0.5"
          referrerPolicy="no-referrer"
          onError={(e) => {
            // Fallback to text initials if image ever fails
            const target = e.currentTarget;
            target.style.display = 'none';
            if (target.parentElement) {
              const fallback = document.createElement('div');
              fallback.className = 'w-full h-full flex items-center justify-center font-black text-amber-300 text-xs tracking-wider';
              fallback.innerText = 'HB';
              target.parentElement.appendChild(fallback);
            }
          }}
        />
      </div>

      {showText && (
        <div className="flex flex-col text-left">
          <div className="flex items-center gap-2">
            <span
              className={`${currentSize.title} tracking-tight uppercase leading-none ${
                textColor || 'text-neutral-900 group-hover:text-emerald-700 transition-colors'
              }`}
            >
              HEALTHY BILLIONAIRES
            </span>
          </div>
          {subtitle && (
            <span
              className={`${currentSize.sub} font-semibold text-emerald-700 tracking-wide mt-1 leading-none`}
            >
              {subtitle}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

export default HbfcLogo;