'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface LogoProps {
  size?: 'sm' | 'md' | 'lg';
  showText?: boolean;
  className?: string;
}

export function Logo({ size = 'md', showText = true, className }: LogoProps) {
  const sizes = {
    sm: { icon: 32, text: 'text-lg' },
    md: { icon: 40, text: 'text-xl' },
    lg: { icon: 56, text: 'text-3xl' },
  };

  const { icon, text } = sizes[size];

  return (
    <motion.div
      className={cn('flex items-center gap-3', className)}
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.3 }}
    >
      {/* Logo Icon */}
      <div className="relative">
        <svg
          width={icon}
          height={icon}
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="drop-shadow-lg"
        >
          {/* 外圈 */}
          <circle
            cx="24"
            cy="24"
            r="22"
            stroke="url(#logoGradient)"
            strokeWidth="2"
            fill="none"
          />
          
          {/* 内部图形 - S 形状的抽象表示 */}
          <path
            d="M16 18C16 14.6863 18.6863 12 22 12H26C29.3137 12 32 14.6863 32 18C32 21.3137 29.3137 24 26 24H22C18.6863 24 16 26.6863 16 30C16 33.3137 18.6863 36 22 36H26C29.3137 36 32 33.3137 32 30"
            stroke="url(#logoGradient)"
            strokeWidth="2.5"
            strokeLinecap="round"
            fill="none"
          />
          
          {/* 点缀 */}
          <circle cx="24" cy="24" r="3" fill="url(#logoGradient)" />
          
          <defs>
            <linearGradient id="logoGradient" x1="4" y1="4" x2="44" y2="44" gradientUnits="userSpaceOnUse">
              <stop stopColor="#7aa2f7" />
              <stop offset="0.5" stopColor="#bb9af7" />
              <stop offset="1" stopColor="#7dcfff" />
            </linearGradient>
          </defs>
        </svg>
        
        {/* 光晕效果 */}
        <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl -z-10" />
      </div>
      
      {/* Logo Text */}
      {showText && (
        <span className={cn('font-bold tracking-tight', text)}>
          <span className="text-gradient">Sato</span>
          <span className="text-foreground">Nano</span>
        </span>
      )}
    </motion.div>
  );
}