import { Signal, useSignal } from "@preact/signals";
import { useId } from "preact/hooks";

const Checkbox = (
  { label, checked = useSignal(false) }: {
    label: string;
    checked?: Signal<boolean>;
  },
) => {
  const _id = useId();
  const id = `checkbox-${_id}`;
  return (
    <label
      className="flex items-center py-3 px-4 rounded-2xl"
      style={{ color: "var(--foreground)", background: "var(--background)" }}
    >
      <input
        type="checkbox"
        checked={checked.value}
        name="checkbox-one"
        id={id}
        onChange={(ev) => {
          checked.value = ev.currentTarget.checked;
        }}
        class="bg-gray-200 hover:bg-gray-300 cursor-pointer 
    w-5 h-5 border-3 border-amber-500 focus:outline-none rounded-lg"
      />
      <span class="ml-3">{label}</span>
    </label>
  );
};

export default Checkbox;