import React from 'react';
import { clsx } from 'clsx';

export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string;
  description?: string;
}

const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, label, description, ...props }, ref) => {
    const checkbox = (
      <input
        type="checkbox"
        ref={ref}
        className={clsx(
          'h-4 w-4 shrink-0 rounded-sm border border-primary text-primary',
          'ring-offset-background',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
          'disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        {...props}
      />
    );

    if (label || description) {
      return (
        <div className="flex items-start gap-3">
          {checkbox}
          <div className="flex flex-col">
            {label && (
              <label
                htmlFor={props.id}
                className={clsx('text-sm font-medium cursor-pointer', {
                  'text-muted-foreground': props.disabled,
                })}
              >
                {label}
              </label>
            )}
            {description && (
              <span
                className={clsx('text-xs text-muted-foreground mt-0.5', {
                  'opacity-70': props.disabled,
                })}
              >
                {description}
              </span>
            )}
          </div>
        </div>
      );
    }

    return checkbox;
  }
);

Checkbox.displayName = 'Checkbox';

export default Checkbox;