import React from "react";
import { twMerge } from "tailwind-merge";

interface DropDownItemProps {
  id: string;
  label: string;
  checked?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  itemClass?: string;
  labelClass?: string;
}

const DropDownItem: React.FC<DropDownItemProps> = ({
  id,
  label,
  checked,
  onChange,
  itemClass,
  labelClass,
}) => {
  return (
    <li>
      <div
        className={twMerge("flex items-center p-2 rounded hover:bg-gray-100", itemClass)}
      >
        <input
          id={id}
          type="checkbox"
          checked={checked}
          onChange={onChange}
          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300"
        />
        <label
          htmlFor={id}
          className={twMerge("w-full ms-2 text-sm font-medium text-gray-900 rounded whitespace-nowrap", labelClass)}
        >
          {label}
        </label>
      </div>
    </li>
  );
};

export default DropDownItem;