import { ComponentProps, forwardRef } from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';

import './checkbox.css';

export type CheckboxRef = HTMLButtonElement;
export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;

export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
  return (
    <CheckboxPrimitive.Root {...props} ref={ref} className="c-checkbox">
      <CheckboxPrimitive.Indicator>
        <svg viewBox="0 0 9 9" fill="none" className="c-checkbox__svg">
          <path
            className="c-checkbox__svg-p1"
            d="M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
          />
          <path
            className="c-checkbox__svg-p2"
            d="M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
          />
        </svg>
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
});

Checkbox.displayName = 'Checkbox';
