import React from 'react';
import styled from 'styled-components';

const Icon = ({
  className,
  checked = false,
  onClick,
}: {
  className?: string;
  checked?: boolean;
  onClick?: () => void;
}) => (
  <span className={className} onClick={onClick}>
    {checked ? (
      <svg
        width="14"
        height="14"
        viewBox="0 0 14 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
          fill="var(--checkbox-content-color-inverse)"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
          fill="var(--checkbox-box-color-active)"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M6.36018 9.98574L10.9106 4.21938C11.0343 4.06448 10.9203 3.83984 10.7272 3.83984H10.0758C9.93597 3.83984 9.80268 3.90389 9.71608 4.01474L9.03424 4.8785L5.99975 8.72257L4.28308 6.54742C4.24025 6.49305 4.18567 6.44909 4.12342 6.41883C4.06118 6.38858 3.99269 6.37282 3.92348 6.37273H3.27208C3.07619 6.37273 2.96673 6.59854 3.08778 6.75208L5.64029 9.98581C5.82388 10.2182 6.17616 10.2168 6.36018 9.98574Z"
          fill="var(--checkbox-box-color-active)"
        />
      </svg>
    ) : (
      <svg
        width="14"
        height="14"
        viewBox="0 0 14 14"
        fill="var(--checkbox-box-color)"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z"
          fill="var(--checkbox-content-color-inverse)"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z"
          fill="var(--checkbox-border-color)"
        />
      </svg>
    )}
  </span>
);

export const CheckboxIcon = styled(Icon).attrs<{ checked?: boolean }>({
  'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
})`
  display: flex;

  &:hover {
    --checkbox-border-color: var(--checkbox-border-color-active);
  }
`;