import React from 'react'
import { styled } from '@stitches/react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from './images/CheckIcon'

const Checkbox = styled(CheckboxPrimitive.Root, {
  all: 'unset',
  width: 16,
  height: 16,
  minWidth: 16,
  minHeight: 16,
  borderRadius: 3,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
})

const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
  color: '#FFFFFF',
})

export const CheckboxComponent:React.FC<{
  checked: boolean;
  setChecked:(arg: boolean) => void;
}> = ({checked, setChecked}) => {
  const toggleChecked = () => setChecked(!checked);

  return (
    <Checkbox css={{
      border: checked ? '2px solid #F9D354': '2px solid #3F3E3C4D',
      backgroundColor: checked ? '#F9D354' : '#FFFFFF'
    }} checked={checked} onCheckedChange={toggleChecked}>
      <CheckboxIndicator>
        <CheckIcon />
      </CheckboxIndicator>
    </Checkbox>
  )
}

export default CheckboxComponent