interface LogoProps {
  className?: string;
  wordmarkClassName?: string;
  showWordmark?: boolean;
}

export default function Logo({
  className = "h-8 w-8",
  wordmarkClassName = "text-lg",
  showWordmark = true,
}: LogoProps) {
  return (
    <span className="inline-flex items-center gap-2.5 select-none">
      <svg
        viewBox="0 0 40 40"
        className={className}
        aria-hidden="true"
        role="img"
      >
        <defs>
          <linearGradient id="labnet-mark" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#6FA8FF" />
            <stop offset="100%" stopColor="#2F63EB" />
          </linearGradient>
        </defs>
        <polygon points="9,3 19,3 15,34 5,34" fill="#F5F7FB" />
        <polygon
          points="14,34 36,34 30,24 18,24"
          fill="url(#labnet-mark)"
        />
      </svg>
      {showWordmark && (
        <span
          className={`font-display font-medium tracking-tight ${wordmarkClassName}`}
        >
          <span className="text-ink-100">LabNet</span>
          <span className="text-gradient-blue">Hub</span>
        </span>
      )}
    </span>
  );
}