import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { forwardRef } from 'react';

// const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
//   defaultVariants: {
//     intent: 'default',
//   },
//   variants: {
//     intent: {
//       default: '',
//       disabled: 'cursor-not-allowed',
//     },
//   },
// });

// type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;

// const Label = forwardRef<HTMLLabelElement, LabelProps>(
//   ({ className, intent, title, ...props }, ref) => (
//     <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
//       {title}
//     </label>
//   )
// );

const variants = cva(
  'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
);

export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
  VariantProps<typeof variants> & { readonly loading: boolean };

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, loading, ...props }, ref) => {
    if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;

    return (
      <div className="flex items-center">
        <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
      </div>
    );
  }
);