import React from 'react';

interface LogoProps {
  size?: 'sm' | 'md' | 'lg';
  variant?: 'light' | 'dark';
}

export const TimeNLifeLogo: React.FC<LogoProps> = ({ size = 'md', variant = 'light' }) => {
  const isDark = variant === 'dark';

  const cartSizes = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-14 h-14',
  };

  const titleSizes = {
    sm: 'text-lg',
    md: 'text-2xl',
    lg: 'text-3xl',
  };

  const taglineSizes = {
    sm: 'text-[9px]',
    md: 'text-[11px]',
    lg: 'text-[13px]',
  };

  return (
    <div className="flex items-center gap-2.5 group cursor-pointer select-none">
      {/* Uploaded Shopping Cart Logo Enclosed in Circle */}
      <div
        className={`relative flex items-center justify-center shrink-0 rounded-full bg-white shadow-sm border ${
          isDark ? 'border-amber-900/50 shadow-amber-950/40' : 'border-[#F2E5D9] shadow-rose-900/5'
        } ${cartSizes[size]} overflow-hidden transition-all duration-300 group-hover:scale-105 group-hover:shadow-md`}
      >
        <img
          src="/logo.png"
          alt="TimeNLife Logo"
          referrerPolicy="no-referrer"
          className="w-full h-full object-contain p-1"
        />
      </div>

      {/* Brand Text: TimeNLife */}
      <div className="flex flex-col leading-none">
        <div className={`font-bold tracking-tight font-sans ${titleSizes[size]}`}>
          <span className={isDark ? 'text-white' : 'text-[#1E2432]'}>TimeN</span>
          <span className="text-[#C81E3D] font-extrabold">Life</span>
        </div>
        <span className={`tracking-wide font-medium ${isDark ? 'text-amber-200/60' : 'text-slate-500'} ${taglineSizes[size]}`}>
          Shop More, Live Better
        </span>
      </div>
    </div>
  );
};