"use client";

import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { StepHeader } from "@/components/atoms";
import { MnpForm } from "@/features/services/components/sim/MnpForm";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import type { NumberPortingStepProps } from "../types";

export function NumberPortingStep({
  wantsMnp,
  setWantsMnp,
  mnpData,
  setMnpData,
  activationType,
  validate,
  onNext,
  onBack,
}: NumberPortingStepProps) {
  const handleContinue = () => {
    if ((wantsMnp || activationType === "Scheduled") && !validate()) {
      return;
    }
    onNext();
  };

  return (
    <AnimatedCard
      variant="static"
      className="p-8 transition-all duration-500 ease-in-out transform opacity-100 translate-y-0"
    >
      <div className="mb-6">
        <StepHeader
          stepNumber={4}
          title="Number Porting (Optional)"
          description="Keep your existing phone number by transferring it to your new SIM"
        />
      </div>
      <MnpForm
        wantsMnp={wantsMnp}
        onWantsMnpChange={setWantsMnp}
        mnpData={mnpData}
        onMnpDataChange={setMnpData}
        errors={{}}
      />
      <div className="flex justify-between mt-6">
        <Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
          Back to Add-ons
        </Button>
        <Button onClick={handleContinue} rightIcon={<ArrowRightIcon className="w-4 h-4" />}>
          Review Order
        </Button>
      </div>
    </AnimatedCard>
  );
}
