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

interface PercolateLogoProps {
  className?: string
  size?: number
}

export function PercolateLogo({ className, size = 24 }: PercolateLogoProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      className={cn("text-foreground", className)}
      aria-label="Percolate UI Logo"
    >
      <defs>
        {/* Water droplet gradient definition */}
        <linearGradient id="dropletGradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.7" />
          <stop offset="50%" stopColor="currentColor" stopOpacity="0.9" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="1" />
        </linearGradient>

        {/* Highlight gradient for the top of each droplet */}
        <linearGradient id="highlightGradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="white" stopOpacity="0.4" />
          <stop offset="100%" stopColor="white" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* Middle column - top */}
      <circle cx="12" cy="3" r="1.5" fill="url(#dropletGradient)" />
      <circle cx="12" cy="3" r="1.5" fill="url(#highlightGradient)" />

      {/* Left and right columns - middle level */}
      <circle cx="6" cy="7" r="1.5" fill="url(#dropletGradient)" />
      <circle cx="6" cy="7" r="1.5" fill="url(#highlightGradient)" />

      <circle cx="18" cy="7" r="1.5" fill="url(#dropletGradient)" />
      <circle cx="18" cy="7" r="1.5" fill="url(#highlightGradient)" />

      {/* Middle column - middle (larger) */}
      <circle cx="12" cy="10" r="2.5" fill="url(#dropletGradient)" />
      <circle cx="12" cy="10" r="2.5" fill="url(#highlightGradient)" />

      {/* Left and right columns - bottom level */}
      <circle cx="6" cy="14" r="2.2" fill="url(#dropletGradient)" />
      <circle cx="6" cy="14" r="2.2" fill="url(#highlightGradient)" />

      <circle cx="18" cy="14" r="2.2" fill="url(#dropletGradient)" />
      <circle cx="18" cy="14" r="2.2" fill="url(#highlightGradient)" />

      {/* Middle column - bottom (largest) */}
      <circle cx="12" cy="18" r="3" fill="url(#dropletGradient)" />
      <circle cx="12" cy="18" r="3" fill="url(#highlightGradient)" />
    </svg>
  )
}