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

interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  vertical?: boolean;
}

const Logo = ({ className, size = 'md', vertical = false, ...props }: LogoProps) => {
  const sizeClasses = {
    sm: { logo: "w-5 h-5", text: "text-xs", pm: "text-xs" },
    md: { logo: "w-7 h-7", text: "text-base", pm: "text-xs" },
    lg: { logo: "w-10 h-10", text: "text-lg", pm: "text-sm" },
    xl: { logo: "w-14 h-14", text: "text-xl", pm: "text-base" }
  };

  return (
    <div
      className={cn(
        "flex items-center select-none", 
        vertical ? "flex-col gap-2" : "gap-2",
        className
      )}
      {...props}
    >
      <div className={cn(
        "relative rounded-lg shadow-sm overflow-hidden", 
        sizeClasses[size].logo
      )}>
        <div className="absolute inset-0 bg-gradient-to-br from-orange-500 to-coral-600"></div>
        <div className="absolute inset-0 flex items-center justify-center text-white font-bold">
          <span className={cn(sizeClasses[size].pm, "drop-shadow-sm")}>PM</span>
        </div>
      </div>
      <span className={cn(
        "font-bold tracking-tight bg-gradient-to-r from-orange-600 to-coral-600 bg-clip-text text-transparent whitespace-nowrap", 
        sizeClasses[size].text
      )}>
        PM Tool
      </span>
    </div>
  );
};

export default Logo;