import { iconVariants } from "./variants"

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

export default function CityIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={classNames}
      {...props}
    >
      <path
        d="M3.57495 18.4248V9.0486C3.57495 8.5329 3.75854 8.09079 4.12573 7.72227C4.49291 7.35374 4.93432 7.16947 5.44995 7.16947H9.19995V6.06392C9.19995 5.81301 9.24578 5.57713 9.33745 5.3563C9.42912 5.13547 9.55828 4.93755 9.72495 4.76255L10.6639 3.7943C11.0238 3.42313 11.4698 3.23755 12.0019 3.23755C12.5339 3.23755 12.9833 3.42505 13.35 3.80005L14.2911 4.76082C14.4637 4.93697 14.5958 5.13648 14.6875 5.35935C14.7791 5.58222 14.825 5.81662 14.825 6.06255V10.922H18.575C19.0906 10.922 19.532 11.1059 19.8992 11.4737C20.2664 11.8415 20.45 12.2836 20.45 12.8V18.425C20.45 18.9407 20.2663 19.3821 19.8991 19.7493C19.5319 20.1165 19.0904 20.3 18.5748 20.3H5.44848C4.93279 20.3 4.49162 20.1164 4.12495 19.7492C3.75828 19.382 3.57495 18.9405 3.57495 18.4248ZM5.44995 18.425H7.32495V16.55H5.44995V18.425ZM5.44995 14.675H7.32495V12.8H5.44995V14.675ZM5.44995 10.925H7.32495V9.05005H5.44995V10.925ZM11.075 18.425H12.95V16.55H11.075V18.425ZM11.075 14.675H12.95V12.8H11.075V14.675ZM11.075 10.925H12.95V9.05005H11.075V10.925ZM11.075 7.17505H12.95V5.30005H11.075V7.17505ZM16.7 18.425H18.575V16.55H16.7V18.425ZM16.7 14.675H18.575V12.8H16.7V14.675Z"
        fill="#26201E"
      />
    </svg>
  )
}
