import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneArrowUpRight } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';

interface CallSimulatorProps {
    onSimulate: () => void;
    isCallActive: boolean;
}

export const CallSimulator = ({ onSimulate, isCallActive }: CallSimulatorProps) => {
    return (
        <button
            type="button"
            onClick={onSimulate}
            disabled={isCallActive}
            className={cx(
                'inline-flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold text-white transition duration-100 ease-linear sm:w-auto',
                isCallActive
                    ? 'cursor-not-allowed bg-disabled text-disabled'
                    : 'cursor-pointer bg-brand-solid hover:bg-brand-solid_hover [&:hover_svg]:animate-[ring-shake_0.5s_ease-in-out]',
            )}
        >
            <FontAwesomeIcon icon={faPhoneArrowUpRight} className="size-5 shrink-0" />
            {isCallActive ? 'Call in progress...' : 'Simulate Incoming Call'}
        </button>
    );
};