import type { IconProps } from '@/types/common';

export const AddIcon = (props: IconProps) => {
  return (
    <svg
      width={props.size || props.width || 15}
      height={props.size || props.height || 15}
      viewBox="0 0 15 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_254_6694)">
        <rect y="6.5" width="15" height="2" rx="1" fill="currentColor" />
        <rect
          x="8.5"
          width="15"
          height="2"
          rx="1"
          transform="rotate(90 8.5 0)"
          fill="currentColor"
        />
      </g>
      <defs>
        <clipPath id="clip0_254_6694">
          <rect width="15" height="15" fill="currentColor" />
        </clipPath>
      </defs>
    </svg>
  );
};

export const UploadImgIcon = () => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22.5 12V6C22.5 4.34315 21.1569 3 19.5 3H4.5C2.84315 3 1.5 4.34315 1.5 6V18C1.5 19.6569 2.84315 21 4.5 21H13.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M6 16L10 12.5L12 14.5L18 9"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <circle cx="10" cy="8" r="1" fill="currentColor" />
      <path
        d="M16.5 18H22.5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M19.5 15L19.5 21"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};

export const CheckIcon = (props: IconProps) => {
  return (
    <svg
      width={props.size || props.width || 11}
      height={props.size || props.height || 8}
      viewBox="0 0 11 8"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1 4L4 7L10 1"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export const FullScreenIcon = () => {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="40" height="40" rx="20" fill="currentColor" />
      <rect
        x="11"
        y="11"
        width="18"
        height="18"
        rx="2"
        stroke="white"
        strokeWidth="2"
      />
      <path
        d="M25 15L22 18"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M25 18V15H22"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M18 22L15 25"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M15 22V25H18"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};

export const ExitFullScreenIcon = () => {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="40" height="40" rx="20" fill="currentColor" />
      <rect
        x="11"
        y="11"
        width="18"
        height="18"
        rx="2"
        stroke="white"
        strokeWidth="2"
      />
      <path
        d="M22 18L25 15"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M22 15V18H25"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M15 25L18 22"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M18 25V22H15"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
};
