import { iconVariants } from "./variants"

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

export default function LockIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <mask
        height="24"
        id="mask0_4077_9699"
        maskUnits="userSpaceOnUse"
        style={{ maskType: "alpha" }}
        width="24"
        x="0"
        y="0"
      >
        <rect width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_4077_9699)">
        <path
          d="M6.10156 21.75C5.58593 21.75 5.14452 21.5664 4.77734 21.1992C4.41015 20.832 4.22656 20.3906 4.22656 19.875V10.025C4.22656 9.50937 4.41015 9.06796 4.77734 8.70078C5.14452 8.33359 5.58593 8.15 6.10156 8.15H7.17656V6.20522C7.17656 4.86007 7.64531 3.71875 8.58281 2.78125C9.52031 1.84375 10.6599 1.375 12.0016 1.375C13.3432 1.375 14.4828 1.84375 15.4203 2.78125C16.3578 3.71875 16.8266 4.86007 16.8266 6.20522V8.15H17.9016C18.4172 8.15 18.8586 8.33359 19.2258 8.70078C19.593 9.06796 19.7766 9.50937 19.7766 10.025V19.875C19.7766 20.3906 19.593 20.832 19.2258 21.1992C18.8586 21.5664 18.4172 21.75 17.9016 21.75H6.10156ZM6.10156 19.875H17.9016V10.025H6.10156V19.875ZM12.0016 16.875C12.5309 16.875 12.9841 16.6865 13.3611 16.3095C13.7381 15.9326 13.9266 15.4794 13.9266 14.95C13.9266 14.4206 13.7381 13.9674 13.3611 13.5905C12.9841 13.2135 12.5309 13.025 12.0016 13.025C11.4722 13.025 11.019 13.2135 10.642 13.5905C10.2651 13.9674 10.0766 14.4206 10.0766 14.95C10.0766 15.4794 10.2651 15.9326 10.642 16.3095C11.019 16.6865 11.4722 16.875 12.0016 16.875ZM9.05156 8.15H14.9516V6.19615C14.9516 5.38205 14.665 4.6875 14.092 4.1125C13.519 3.5375 12.8231 3.25 12.0045 3.25C11.1859 3.25 10.4891 3.53681 9.91406 4.11042C9.33906 4.68402 9.05156 5.38055 9.05156 6.2V8.15Z"
          fill="#4D001B"
        />
      </g>
    </svg>
  )
}
