import React from "react";

interface MultiSelectFieldProps {
  label: string;
  field: string;
  value: string[];
  options: string[];
  clickAction: (field: string, options: string[]) => void;
  disabled?: boolean;
    error?: string;
}

const RenderMultiSelectField: React.FC<MultiSelectFieldProps> = ({
  label,
  field,
  value,
  options,
  clickAction,
  disabled = false,
  error
}) => {
  // Get display text based on selected values
  const displayText =
    value && value.length > 0 ? value.join(", ") : `Select ${label}`;

  return (
    <div className="md:flex-1 gap-y-1">
      <label htmlFor={field} className="block text-[12px] mb-1">
        {label}
      </label>
      <div
        className="relative w-full"
        onClick={() => !disabled && clickAction(field, options)}
      >
        <input
          type="text"
          id={field}
          readOnly
          disabled
          value={displayText}
          className={`w-full ${disabled ? "bg-[#d9d9d9]" : "bg-[#F9F9F9] cursor-pointer"} border-none p-2 rounded font-light text-[10px] outline-none`}
        />
        {/* This div overlays the input to make it clickable despite being disabled */}
        <div
          className={`absolute inset-0 ${!disabled ? "cursor-pointer" : ""}`}
          aria-hidden="true"
        />
      </div>
      {error && <p className="text-red-500 text-xs mt-1">{error}</p>}

    </div>
  );
};

export default RenderMultiSelectField;
