import { SVGProps } from "react"

export type IconSvgProps = SVGProps<SVGSVGElement> & {
  size?: number
}

export const EyeOffIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 512 512"
  >
    <path
      fill="currentColor"
      d="M432 448a15.92 15.92 0 0 1-11.31-4.69l-352-352a16 16 0 0 1 22.62-22.62l352 352A16 16 0 0 1 432 448M248 315.85l-51.79-51.79a2 2 0 0 0-3.39 1.69a64.11 64.11 0 0 0 53.49 53.49a2 2 0 0 0 1.69-3.39m16-119.7L315.87 248a2 2 0 0 0 3.4-1.69a64.13 64.13 0 0 0-53.55-53.55a2 2 0 0 0-1.72 3.39"
    />
    <path
      fill="currentColor"
      d="M491 273.36a32.2 32.2 0 0 0-.1-34.76c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.68 96a226.5 226.5 0 0 0-71.82 11.79a4 4 0 0 0-1.56 6.63l47.24 47.24a4 4 0 0 0 3.82 1.05a96 96 0 0 1 116 116a4 4 0 0 0 1.05 3.81l67.95 68a4 4 0 0 0 5.4.24a343.8 343.8 0 0 0 67.24-77.4M256 352a96 96 0 0 1-93.3-118.63a4 4 0 0 0-1.05-3.81l-66.84-66.87a4 4 0 0 0-5.41-.23c-24.39 20.81-47 46.13-67.67 75.72a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.39 76.14 98.28 100.65C162.06 402 207.92 416 255.68 416a238.2 238.2 0 0 0 72.64-11.55a4 4 0 0 0 1.61-6.64l-47.47-47.46a4 4 0 0 0-3.81-1.05A96 96 0 0 1 256 352"
    />
  </svg>
)
export const EyeIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 512 512"
  >
    <circle cx="256" cy="256" r="64" fill="currentColor" />
    <path
      fill="currentColor"
      d="M490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96c-42.52 0-84.33 12.15-124.27 36.11c-40.73 24.43-77.63 60.12-109.68 106.07a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416c46.71 0 93.81-14.43 136.2-41.72c38.46-24.77 72.72-59.66 99.08-100.92a32.2 32.2 0 0 0-.1-34.76M256 352a96 96 0 1 1 96-96a96.11 96.11 0 0 1-96 96"
    />
  </svg>
)
export const ManagementIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      d="M8.502 20.504v1H4.5v-3h1v2zm12.002-2v3h-3v-1h2v-2zm-4.001 3.001v2H9.502v-2h1v-1h2v-1h-1v-1.001h-1v-3h1v-1.001h3.001v1h1v3h-1v1.001h-1v1h2v1zm7.002-6.002v2h-7.002v-2h1v-1h2.001v-1h-1v-1h-1V9.501h1v-1h3v1h1v3h-1v1h-1v1h2v1.001zm-15.003 0v2H1.5v-2h1v-1h2v-1h-1v-1h-1V9.501h1v-1h3.001v1h1v3h-1v1h-1v1h2v1.001zm0-12.003v1H5.5v3.001h-1v-4zm12.002 0v4.001h-1v-3h-4v-1zm-5.001 5.002v2H8.502v-2h1v-1h2v-1h-1V5.5h-1v-3h1v-1h3v1h1.001v3h-1v1.001h-1v1h2v1z"
    />
  </svg>
)
export const UploadAccount = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      d="M17 17v4h2v-4h2l-3-3l-3 3zM11 4C8.8 4 7 5.8 7 8s1.8 4 4 4s4-1.8 4-4s-1.8-4-4-4m0 10c-4.4 0-8 1.8-8 4v2h9.5c-.3-.8-.5-1.6-.5-2.5c0-1.2.3-2.3.9-3.4c-.6 0-1.2-.1-1.9-.1"
    />
  </svg>
)
export const NotificationIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      d="M6.429 2.413a.75.75 0 0 0-1.13-.986l-1.292 1.48a4.75 4.75 0 0 0-1.17 3.024L2.78 8.65a.75.75 0 0 0 1.5.031l.056-2.718a3.25 3.25 0 0 1 .801-2.069z"
    />
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="M6.237 7.7a4.214 4.214 0 0 1 4.206-3.95H11V3a1 1 0 1 1 2 0v.75h.557a4.214 4.214 0 0 1 4.206 3.95l.221 3.534a7.4 7.4 0 0 0 1.308 3.754a1.617 1.617 0 0 1-1.135 2.529l-3.407.408V19a2.75 2.75 0 1 1-5.5 0v-1.075l-3.407-.409a1.617 1.617 0 0 1-1.135-2.528a7.4 7.4 0 0 0 1.308-3.754zM10.75 19a1.25 1.25 0 0 0 2.5 0v-.75h-2.5z"
      clipRule="evenodd"
    />
    <path
      fill="currentColor"
      d="M17.643 1.355a.75.75 0 0 0-.072 1.058l1.292 1.48a3.25 3.25 0 0 1 .8 2.07l.057 2.717a.75.75 0 1 0 1.5-.031l-.057-2.718a4.75 4.75 0 0 0-1.17-3.024l-1.292-1.48a.75.75 0 0 0-1.058-.072"
    />
  </svg>
)
export const UserFillIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 24 24"
  >
    <g fill="none" fillRule="evenodd">
      <path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" />
      <path
        fill="currentColor"
        d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2M8.5 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0m9.758 7.484A7.99 7.99 0 0 1 12 20a7.99 7.99 0 0 1-6.258-3.016C7.363 15.821 9.575 15 12 15s4.637.821 6.258 1.984"
      />
    </g>
  </svg>
)
export const ReloadIcon = ({
  size,
  height = 24,
  width = 24,
  ...props
}: IconSvgProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height={size || height}
    width={size || width}
    {...props}
    viewBox="0 0 24 24"
  >
    <g
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth="1.5"
    >
      <path
        strokeMiterlimit="10"
        d="M18.024 7.043A8.374 8.374 0 0 0 3.74 12.955"
      />
      <path
        strokeLinejoin="round"
        d="m17.35 2.75l.832 3.372a1.123 1.123 0 0 1-.854 1.382l-3.372.843"
      />
      <path
        strokeMiterlimit="10"
        d="M5.976 16.957a8.374 8.374 0 0 0 14.285-5.912"
      />
      <path
        strokeLinejoin="round"
        d="m6.65 21.25l-.832-3.372a1.124 1.124 0 0 1 .855-1.382l3.371-.843"
      />
    </g>
  </svg>
)