"use client";
import React, { forwardRef } from "react";

interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  ({ label, error, className = "", ...props }, ref) => {
    return (
      <div className="flex flex-col gap-2">
        <div className="flex items-start gap-3">
          <input
            type="checkbox"
            ref={ref}
            className={`
              mt-1 w-4 h-4 rounded border-crisp text-ocean 
              focus:ring-ocean focus:ring-offset-0 cursor-pointer
              ${className}
            `}
            {...props}
          />
          <label className="text-[13px] text-navy/60 font-medium leading-tight cursor-pointer">
            {label}
          </label>
        </div>
        {error && (
          <span className="text-red-500 text-xs font-bold">{error}</span>
        )}
      </div>
    );
  }
);

Checkbox.displayName = "Checkbox";