'use client';

interface LogoProps {
  variant?: 'full' | 'icon';
  className?: string;
  size?: 'sm' | 'md' | 'lg';
}

const sizes = {
  sm: { icon: 20, text: 'text-sm', gap: 'gap-1.5' },
  md: { icon: 24, text: 'text-xl', gap: 'gap-2' },
  lg: { icon: 32, text: 'text-2xl', gap: 'gap-2.5' },
};

export function Logo({ variant = 'full', className = '', size = 'md' }: LogoProps) {
  const s = sizes[size];

  const icon = (
    <svg
      width={s.icon}
      height={s.icon}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="shrink-0"
    >
      <rect width="32" height="32" rx="8" fill="currentColor" className="text-primary" />
      <text
        x="16"
        y="22"
        textAnchor="middle"
        fill="white"
        fontWeight="800"
        fontSize="16"
        fontFamily="system-ui, -apple-system, sans-serif"
      >
        MF
      </text>
    </svg>
  );

  if (variant === 'icon') {
    return <span className={className}>{icon}</span>;
  }

  return (
    <span className={`flex items-center ${s.gap} ${className}`}>
      {icon}
      <span className={`font-bold ${s.text}`}>
        My<span className="text-primary">Fit</span>CRM
      </span>
    </span>
  );
}
