import type React from "react";

interface TableCheckboxProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  className?: string;
  id?: string;
  disabled?: boolean;
}

const TableCheckbox: React.FC<TableCheckboxProps> = ({
  checked,
  onChange,
  className = "",
  id,
  disabled = false,
}) => {
  return (
    <div className="relative flex h-4 w-4 items-center justify-center">
      <input
        id={id}
        type="checkbox"
        className={`h-4 w-4 appearance-none rounded border-2 transition-all ${
          disabled
            ? "border-gray-300 bg-gray-100 cursor-not-allowed dark:border-gray-700 dark:bg-gray-800"
            : checked
            ? "border-brand-500 bg-brand-500 dark:border-brand-500 dark:bg-brand-500"
            : "border-gray-300 bg-transparent dark:border-gray-600"
        } ${className}`}
        checked={checked}
        onChange={(e) => !disabled && onChange(e.target.checked)}
        disabled={disabled}
      />
      {checked && (
        <svg
          className="absolute pointer-events-none h-2.5 w-2.5 text-white dark:text-white"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fillRule="evenodd"
            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
            clipRule="evenodd"
          />
        </svg>
      )}
    </div>
  );
};

export default TableCheckbox;
