import { type FC } from "react";
import { clx } from "../../../../../helpers/utils";

type Props = {
  checked: boolean;
  onToggle: () => void;
  ariaLabel?: string;
};

const TaskDetailLabelCheckbox: FC<Props> = ({ checked, onToggle, ariaLabel }) => {
  return (
    <button
      type="button"
      onClick={onToggle}
      className={clx("shrink-0 size-4 rounded-md border flex items-center justify-center cursor-pointer transition-colors", checked ? "bg-black border-black" : "bg-white/60 border-[#D0D0D0]")}
      aria-label={ariaLabel}
      aria-checked={checked}
      role="checkbox"
    >
      {checked && (
        <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden>
          <path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      )}
    </button>
  );
};

export default TaskDetailLabelCheckbox;
