import { InfoIcon } from "lucide-react";
import React from "react";
import { OptionalAddButton } from "./OptionalAddButton";

interface OptionalLabelProps {
  text: string;
  onAddClick: () => void;
  buttonSize?: number;
  onInfoClick?: () => void;
}

export const OptionalLabel: React.FC<OptionalLabelProps> = ({
  text,
  onAddClick,
  buttonSize = 14,
  onInfoClick,
}) => {
  return (
    <label className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-700">
      <span>{text}</span>
      <OptionalAddButton onClick={onAddClick} size={buttonSize} />
      {onInfoClick && (
        <button
          type="button"
          title="Ver explicação do filtro"
          aria-label="Ver explicação do filtro"
          onClick={onInfoClick}
          className="
            ml-0.5
            w-7 h-7
            flex items-center justify-center
            rounded-md
            border border-sky-200
            text-sky-600
            bg-sky-50
            transition
            hover:bg-sky-100
            hover:border-sky-300
            focus:outline-none
          "
        >
          <InfoIcon size={13} />
        </button>
      )}
    </label>
  );
};