import { iconVariants } from "./variants"

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

export default function SafetyBoxIcon({
  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}
    >
      <mask
        style={{ maskType: "alpha" }}
        id="mask0_82_314"
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="24"
        height="24"
      >
        <rect width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_82_314)">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M4.875 18.55C4.35937 18.55 3.91796 18.3664 3.55078 17.9992C3.18359 17.632 3 17.1906 3 16.675V4.875C3 4.35937 3.18359 3.91796 3.55078 3.55078C3.91796 3.18359 4.35937 3 4.875 3H18.675C19.1906 3 19.632 3.18359 19.9992 3.55078C20.3664 3.91796 20.55 4.35937 20.55 4.875V16.675C20.55 17.1906 20.3664 17.632 19.9992 17.9992C19.632 18.3664 19.1906 18.55 18.675 18.55V19.5875C18.675 19.8458 18.5833 20.0667 18.4 20.25C18.2167 20.4333 17.9958 20.525 17.7375 20.525C17.4792 20.525 17.2583 20.4333 17.075 20.25C16.8917 20.0667 16.8 19.8458 16.8 19.5875V18.55H6.75V19.5875C6.75 19.8458 6.65833 20.0667 6.475 20.25C6.29167 20.4333 6.07083 20.525 5.8125 20.525C5.55417 20.525 5.33333 20.4333 5.15 20.25C4.96667 20.0667 4.875 19.8458 4.875 19.5875V18.55ZM4.875 4.875V16.675H18.675V14.275H17.675C17.4167 14.275 17.1958 14.1834 17.0125 14C16.8292 13.8167 16.7375 13.5959 16.7375 13.3375C16.7375 13.0792 16.8292 12.8584 17.0125 12.675C17.1958 12.4917 17.4167 12.4 17.675 12.4H18.675V9.15002H17.675C17.4167 9.15002 17.1958 9.05836 17.0125 8.87502C16.8292 8.69169 16.7375 8.47086 16.7375 8.21252C16.7375 7.95419 16.8292 7.73336 17.0125 7.55002C17.1958 7.36669 17.4167 7.27502 17.675 7.27502H18.675V4.875H4.875Z"
          fill="#26201E"
        />
        <path
          d="M13.2845 11.2845C13.6615 10.9076 13.85 10.4544 13.85 9.925C13.85 9.39562 13.6615 8.94244 13.2845 8.56548C12.9076 8.18849 12.4544 8 11.925 8C11.3956 8 10.9424 8.18849 10.5655 8.56548C10.1885 8.94244 10 9.39562 10 9.925C10 10.4544 10.1885 10.9076 10.5655 11.2845C10.7069 11.426 10.8419 11.5315 11.0049 11.6199V12.6375C11.0049 12.8959 11.0965 13.1167 11.2799 13.3C11.4632 13.4834 11.684 13.575 11.9424 13.575C12.2007 13.575 12.4215 13.4834 12.6049 13.3C12.7882 13.1167 12.8799 12.8959 12.8799 12.6375V11.6C13.0318 11.514 13.1516 11.4175 13.2845 11.2845Z"
          fill="#26201E"
        />
      </g>
    </svg>
  )
}
