import React from 'react'

interface RolldownLogoProps {
  className?: string
}

export const RolldownLogo: React.FC<RolldownLogoProps> = ({ className = 'w-auto h-10' }) => (
  <svg viewBox="0 0 177 15" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
    <path
      d="M27.21 0C33.32 0 36.53 2.57 36.53 7.5C36.53 12.43 33.32 15 27.21 15C21.1 15 17.91 12.43 17.91 7.5C17.91 2.57 21.1 0 27.21 0ZM97.57 0C103.68 0 106.89 2.57 106.89 7.5C106.89 12.43 103.68 15 97.57 15C91.46 15 88.27 12.43 88.27 7.5C88.27 2.57 91.46 0 97.57 0ZM11.33 0.25C14.65 0.25 16.53 1.97 16.53 4.99C16.53 6.73 15.7 8.02 14.42 8.76L16.6 14.75H11.31L9.8 10.05H4.97V14.75H0V0.25H11.33ZM43.41 11.13H52.09V14.75H38.44V0.25H43.41V11.13ZM58.92 11.13H67.6V14.75H53.95V0.25H58.92V11.13ZM78.71 0.25C83.75 0.25 86.63 2.53 86.63 7.5C86.63 12.47 83.73 14.75 78.69 14.75H69.6V0.25H78.71ZM114.34 10.21L116.46 2.84H122.03L124.27 10.5L126.03 0.25H130.88L127.89 14.75H121.61L119.21 6.55L116.87 14.75H110.57L107.59 0.25H112.52L114.34 10.21ZM138.78 0.25L144.76 9.68H144.81V0.25H149.53V14.75H143.56L137.53 5.28H137.47V14.75H132.77V0.25H138.78ZM27.21 3.56C24.33 3.56 22.98 4.81 22.98 7.5C22.98 10.19 24.33 11.42 27.21 11.42C30.09 11.42 31.44 10.21 31.44 7.5C31.44 4.79 30.09 3.56 27.21 3.56ZM97.57 3.56C94.69 3.56 93.34 4.81 93.34 7.5C93.34 10.19 94.69 11.42 97.57 11.42C100.45 11.42 101.8 10.21 101.8 7.5C101.8 4.79 100.45 3.56 97.57 3.56ZM74.57 11.23H78.01C80.37 11.23 81.53 10.21 81.53 7.5C81.53 4.79 80.37 3.77 78.01 3.77H74.57V11.23ZM4.97 6.63H9.92C10.94 6.63 11.44 6.09 11.44 5.14C11.44 4.18 10.94 3.67 9.92 3.67H4.97V6.63Z"
      fill="currentColor"
    />
    <path
      d="M170.23 0.25C170.54 0.25 170.71 0.61 170.51 0.84L167.16 4.86C166.77 5.33 167.11 6.05 167.72 6.05H170.96C171.27 6.05 171.43 6.41 171.24 6.64L164.76 14.42C164.61 14.59 164.35 14.59 164.2 14.42L157.72 6.64C157.53 6.41 157.69 6.05 158 6.05H161.24C161.85 6.05 162.19 5.33 161.8 4.86L158.45 0.84C158.25 0.61 158.42 0.25 158.73 0.25H170.23Z"
      fill="#FF5500"
    />
    <mask id="mask0_rd" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="157" y="0" width="15" height="15">
      <path
        d="M170.23 0.25C170.54 0.25 170.71 0.61 170.51 0.84L167.16 4.86C166.77 5.33 167.11 6.05 167.72 6.05H170.96C171.27 6.05 171.43 6.41 171.24 6.64L164.76 14.42C164.61 14.59 164.35 14.59 164.2 14.42L157.72 6.64C157.53 6.41 157.69 6.05 158 6.05H161.24C161.85 6.05 162.19 5.33 161.8 4.86L158.45 0.84C158.25 0.61 158.42 0.25 158.73 0.25H170.23Z"
        fill="black"
      />
    </mask>
    <g mask="url(#mask0_rd)">
      <g filter="url(#f0_rd)">
        <ellipse cx="1.73" cy="7.56" rx="1.73" ry="7.56" transform="matrix(-0.864 -0.504 -0.504 0.864 176.76 -5.36)" fill="#FFE7E5" />
      </g>
      <g filter="url(#f1_rd)">
        <ellipse cx="1.73" cy="7.56" rx="1.73" ry="7.56" transform="matrix(-0.864 -0.504 -0.504 0.864 176.39 2.01)" fill="#FFE7E5" />
      </g>
      <g filter="url(#f2_rd)">
        <ellipse cx="157.85" cy="0.46" rx="1.19" ry="7" transform="rotate(-36.09 157.85 0.46)" fill="#FF19AF" />
      </g>
      <g filter="url(#f3_rd)">
        <ellipse cx="159.7" cy="10.93" rx="1.19" ry="7" transform="rotate(-36.09 159.7 10.93)" fill="#FF19AF" />
      </g>
      <g filter="url(#f4_rd)">
        <ellipse cx="1.19" cy="7" rx="1.19" ry="7" transform="matrix(-0.808 -0.589 -0.589 0.808 176.2 -4.49)" fill="#FF19AF" />
      </g>
      <g filter="url(#f5_rd)">
        <ellipse cx="1.19" cy="7" rx="1.19" ry="7" transform="matrix(-0.808 -0.589 -0.589 0.808 173.99 5.98)" fill="#FF19AF" />
      </g>
      <g filter="url(#f6_rd)">
        <ellipse cx="1.19" cy="7" rx="1.19" ry="7" transform="matrix(-0.808 -0.589 -0.589 0.808 175.1 -4.49)" fill="#FF19AF" />
      </g>
      <g filter="url(#f7_rd)">
        <ellipse cx="1.19" cy="7" rx="1.19" ry="7" transform="matrix(-0.808 -0.589 -0.589 0.808 173.25 5.98)" fill="#FF19AF" />
      </g>
      <g filter="url(#f8_rd)">
        <ellipse cx="158.53" cy="0.97" rx="1.73" ry="7.56" transform="rotate(-40.91 158.53 0.97)" fill="#D14B2A" />
      </g>
      <g filter="url(#f9_rd)">
        <ellipse cx="159.71" cy="9.14" rx="1.73" ry="7.56" transform="rotate(-35.89 159.71 9.14)" fill="#D14B2A" />
      </g>
    </g>
    <path d="M154.47 0C151.53 4.22 151.51 10.76 154.47 15H156.47C153.5 10.76 153.52 4.22 156.47 0H154.47Z" fill="currentColor" />
    <path d="M174.49 0H172.49C175.44 4.22 175.46 10.76 172.49 15H174.49C177.45 10.76 177.43 4.22 174.49 0Z" fill="currentColor" />
    <defs>
      <filter id="f0_rd" x="165.15" y="-8.5" width="12.61" height="17.6" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f1_rd" x="164.78" y="-1.13" width="12.61" height="17.6" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f2_rd" x="151.41" y="-7.45" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f3_rd" x="153.25" y="3.02" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f4_rd" x="164.67" y="-7.45" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f5_rd" x="162.46" y="3.02" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f6_rd" x="163.56" y="-7.45" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f7_rd" x="161.72" y="3.02" width="12.89" height="15.82" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f8_rd" x="151.2" y="-7.07" width="14.66" height="16.07" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
      <filter id="f9_rd" x="152.85" y="0.72" width="13.72" height="16.84" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
        <feFlood floodOpacity="0" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" result="shape" />
        <feGaussianBlur stdDeviation="1.1" result="blur" />
      </filter>
    </defs>
  </svg>
)