import React from "react";
import * as CheckboxPrimitive from "@rn-primitives/checkbox";
import { Ionicons } from "@expo/vector-icons";
import { cn } from "../utils/cn";
import { useColorScheme } from "nativewind";

interface CheckboxProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
  accessibilityLabel?: string;
  accessibilityRole?: "checkbox" | "none";
}

function Checkbox({
  checked,
  onCheckedChange,
  disabled,
  className,
  accessibilityLabel,
  accessibilityRole,
}: CheckboxProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <CheckboxPrimitive.Root
      checked={checked}
      onCheckedChange={onCheckedChange}
      disabled={disabled}
      accessibilityLabel={accessibilityLabel}
      accessibilityRole={accessibilityRole}
      className={cn(
        "h-5 w-5 rounded items-center justify-center",
        checked ? "bg-primary dark:bg-white" : "border border-input dark:border-neutral-600",
        disabled && "opacity-50",
        className
      )}
    >
      <CheckboxPrimitive.Indicator>
        <Ionicons name="checkmark" size={14} color={isDark ? "#000000" : "#ffffff"} />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };