import { iconVariants } from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function SpeakerIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height="20"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#26201E"
        d="M16.925 21.75h-9.85c-.516 0-.957-.184-1.324-.55a1.806 1.806 0 0 1-.551-1.325V4.125c0-.516.184-.957.55-1.324.368-.367.81-.551 1.325-.551h9.85c.516 0 .957.184 1.324.55.367.368.551.81.551 1.325v15.75c0 .516-.184.957-.55 1.324-.368.367-.81.551-1.325.551Zm0-1.875V4.125h-9.85v15.75h9.85ZM12 9c.53 0 .982-.188 1.36-.565.377-.377.565-.83.565-1.36 0-.53-.189-.983-.566-1.36A1.854 1.854 0 0 0 12 5.15c-.53 0-.983.188-1.36.565-.377.377-.565.83-.565 1.36 0 .53.188.983.565 1.36.377.377.83.565 1.36.565Zm.003 9.85c1.073 0 1.99-.382 2.753-1.146.763-.765 1.144-1.683 1.144-2.757 0-1.073-.382-1.99-1.146-2.753-.765-.763-1.684-1.144-2.757-1.144-1.073 0-1.99.382-2.753 1.146-.763.765-1.144 1.683-1.144 2.757 0 1.073.382 1.99 1.146 2.753.765.763 1.683 1.144 2.757 1.144Zm-.005-1.875a1.946 1.946 0 0 1-1.43-.595 1.954 1.954 0 0 1-.593-1.431c0-.558.198-1.034.595-1.43a1.954 1.954 0 0 1 1.431-.594c.558 0 1.034.198 1.43.595.396.397.594.874.594 1.432 0 .557-.199 1.033-.595 1.43a1.954 1.954 0 0 1-1.432.593Z"
      />
    </svg>
  )
}
