interface LogoProps {
  className?: string;
}

export function Logo({ className = "w-8 h-8" }: LogoProps) {
  return (
    <svg
      viewBox="0 0 60 60"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <defs>
        <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: "#FF6347", stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: "#FF4500", stopOpacity: 1 }} />
        </linearGradient>
        <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: "#00CED1", stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: "#4682B4", stopOpacity: 1 }} />
        </linearGradient>
      </defs>

      {/* Surfboard/skateboard deck shapes stacked */}
      <g transform="translate(30, 30)">
        {/* Top board slice */}
        <ellipse cx="0" cy="-8" rx="15" ry="6" fill="url(#board1)"/>

        {/* Middle board slice */}
        <ellipse cx="0" cy="0" rx="18" ry="6" fill="url(#board2)"/>

        {/* Bottom board slice */}
        <ellipse cx="0" cy="8" rx="12" ry="6" fill="#32CD32"/>
      </g>
    </svg>
  );
}