"use client";

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

export function ActivationStep({
  activationType,
  setActivationType,
  scheduledActivationDate,
  setScheduledActivationDate,
  activationFee,
  validate,
  onNext,
  onBack,
}: ActivationStepProps) {
  const handleContinue = () => {
    if (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={2}
          title="Activation"
          description="Choose when to start your service"
        />
      </div>
      <ActivationForm
        activationType={activationType || "Immediate"}
        onActivationTypeChange={setActivationType}
        scheduledActivationDate={scheduledActivationDate}
        onScheduledActivationDateChange={setScheduledActivationDate}
        errors={{}}
        activationFee={activationFee}
      />
      <div className="flex justify-between mt-6">
        <Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
          Back to SIM Type
        </Button>
        <Button onClick={handleContinue} rightIcon={<ArrowRightIcon className="w-4 h-4" />}>
          Continue to Add-ons
        </Button>
      </div>
    </AnimatedCard>
  );
}
