"use client";

import { Loader2 } from "lucide-react";
import { Connector } from "@/types/connector/connector";
import { useStartCharging } from "../hooks/useStartCharging";

interface ConnectButtonProps {
  selectedConnector: string | null;
  connectors: Connector[];
  isStarting: boolean;
  onStartSession: (connectorId: string) => Promise<void>;
}

const ConnectButton = (props: ConnectButtonProps) => {
  const { selectedConnector, connectors, isStarting, onStartSession } = props;
  const selected = connectors.find((c) => c.id === selectedConnector);
  const { checking, disabled, buttonLabel, handleClick } = useStartCharging({
    selectedConnector: selected,
    isStarting,
    onStartSession,
  });

  return (
    <div className="mt-8 flex justify-center">
      <div className="w-full max-w-md flex flex-col items-center gap-3">
        <button
          disabled={disabled}
          onClick={handleClick}
          className={`w-full rounded-xl px-8 py-4 text-lg font-semibold text-white shadow-lg transform transition-all duration-200 flex items-center justify-center gap-3
            ${
              disabled
                ? "bg-brand-400 cursor-not-allowed opacity-70"
                : "bg-brand-600 hover:bg-brand-700 active:bg-brand-800 hover:shadow-xl hover:-translate-y-0.5"
            }
          `}
        >
          {(isStarting || checking) && (
            <Loader2 className="h-5 w-5 animate-spin text-white" />
          )}
          {buttonLabel}
        </button>
      </div>
    </div>
  );
};

export default ConnectButton;