import { Check, Loader2, ShieldCheck } from 'lucide-react';

type ChannelConfigActionsProps = {
  confirmLabel: string;
  validateLabel?: string;
  validatingLabel?: string;
  onConfirm: () => void;
  onValidate?: () => void;
  disabled?: boolean;
  submitting?: boolean;
  validating?: boolean;
};

export default function ChannelConfigActions({
  confirmLabel,
  validateLabel,
  validatingLabel,
  onConfirm,
  onValidate,
  disabled,
  submitting,
  validating,
}: ChannelConfigActionsProps) {
  return (
    <div className="flex flex-col gap-3 border-t border-black/10 pt-6 sm:flex-row sm:justify-end dark:border-white/10">
      {onValidate ? (
        <button
          type="button"
          className="inline-flex h-[54px] items-center justify-center rounded-full border border-black/10 bg-[#fbf8f1] px-6 text-[15px] font-semibold text-[#1f2937] transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-100 dark:hover:bg-white/10"
          onClick={onValidate}
          disabled={disabled || submitting || validating}
        >
          {validating ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              {validatingLabel ?? validateLabel}
            </>
          ) : (
            <>
              <ShieldCheck className="mr-2 h-4 w-4" />
              {validateLabel}
            </>
          )}
        </button>
      ) : null}

      <button
        type="button"
        className="inline-flex h-[54px] items-center justify-center rounded-full bg-[#8ea8ff] px-7 text-[15px] font-semibold text-white transition-colors hover:bg-[#7f9afb] disabled:cursor-not-allowed disabled:opacity-60 dark:bg-[#8ea8ff] dark:text-white dark:hover:bg-[#7f9afb]"
        onClick={onConfirm}
        disabled={disabled || submitting || validating}
      >
        {submitting ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            {confirmLabel}...
          </>
        ) : (
          <>
            <Check className="mr-2 h-4 w-4" />
            {confirmLabel}
          </>
        )}
      </button>
    </div>
  );
}