"use client";

/**
 * Small circular "✕" button used to clear a form field's value.
 * Shared by the text/select/date inputs in the dynamic form.
 */
export function ClearButton({
  onClick,
  className = "",
}: {
  onClick?: () => void;
  className?: string;
}) {
  return (
    <button
      type="button"
      aria-label="Clear"
      // Keep focus / avoid toggling a parent dropdown before our click runs.
      onMouseDown={(e) => e.preventDefault()}
      onClick={(e) => {
        e.stopPropagation();
        onClick?.();
      }}
      className={`flex items-center justify-center w-[22px] h-[22px] rounded-full bg-[#E0E0E0] hover:bg-[#cfcfcf] text-[#58585A] transition-colors cursor-pointer ${className}`}
    >
      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
        <path d="M1 1L9 9M9 1L1 9" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
      </svg>
    </button>
  );
}

export default ClearButton;