import React, { ComponentProps } from 'react';
import { Checkbox } from '@cloudflare/component-checkbox';
import { Base, BaseProps } from './Base';

export type CheckboxProps<ValueType> = Omit<
  BaseProps<ComponentProps<typeof Checkbox>, ValueType>,
  'value' | 'name'
> & { value?: ValueType; name?: string };

export default function FormCheckbox<ValueType>({
  labelProps,
  componentStyleProps,
  ...props
}: CheckboxProps<ValueType>) {
  return (
    <Base<CheckboxProps<ValueType>, ValueType>
      // @ts-ignore
      Component={Checkbox}
      labelFirst={false}
      // Prevent the checkbox component rendering its own label
      noLabel
      labelProps={{
        display: 'inline-block',
        verticalAlign: 'top',
        marginLeft: 0,
        ...labelProps
      }}
      componentStyleProps={{
        mt: 0,
        ...componentStyleProps
      }}
      {...props}
    />
  );
}