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="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z"
          fill="var(--checkbox-box-color-active)"
        />
        <path
          d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
          fill="var(--checkbox-content-color-inverse)"
          stroke="var(--checkbox-content-color-inverse)"
        />
      </svg>
    ) : (
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="var(--checkbox-box-color)"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="0.5"
          y="0.5"
          width="15"
          height="15"
          rx="3.5"
          stroke="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);
  }
`;