import { cn } from "@/lib/utils";

interface LogoIconProps {
  className?: string;
  size?: number;
}

export function LogoIcon({ className, size = 32 }: LogoIconProps) {
  return (
    <div
      className={cn(
        "rounded-xl bg-gradient-to-br from-violet-600 via-violet-500 to-cyan-500 flex items-center justify-center shadow-lg flex-shrink-0",
        className
      )}
      style={{ width: size, height: size }}
    >
      <svg
        width={size * 0.62}
        height={size * 0.62}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Scissors — top blade */}
        <circle cx="6" cy="6" r="2.8" stroke="white" strokeWidth="1.6" fill="none" strokeOpacity="0.95" />
        <line x1="8.5" y1="8.5" x2="17" y2="17" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeOpacity="0.95" />
        {/* Scissors — bottom blade */}
        <circle cx="6" cy="18" r="2.8" stroke="white" strokeWidth="1.6" fill="none" strokeOpacity="0.95" />
        <line x1="8.5" y1="15.5" x2="17" y2="7" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeOpacity="0.95" />
        {/* AI spark — top right */}
        <circle cx="19" cy="5" r="1.4" fill="#67e8f9" />
        <line x1="19" y1="2.2" x2="19" y2="3.4" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
        <line x1="19" y1="6.6" x2="19" y2="7.8" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
        <line x1="16.2" y1="5" x2="17.4" y2="5" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
        <line x1="20.6" y1="5" x2="21.8" y2="5" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
      </svg>
    </div>
  );
}

interface LogoProps {
  className?: string;
  iconSize?: number;
  textSize?: string;
}

export function Logo({ className, iconSize = 32, textSize = "text-lg", name }: LogoProps & { name?: string }) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <LogoIcon size={iconSize} />
      <span className={cn("font-black tracking-tight gradient-text", textSize)}>
        {name ?? <>ReelsCutter</>}
      </span>
    </div>
  );
}