"use client";

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

export function SimTypeStep({
  simType,
  setSimType,
  eid,
  setEid,
  validate,
  onNext,
}: SimTypeStepProps) {
  const handleContinue = () => {
    if (simType === "eSIM" && !validate()) {
      return;
    }
    onNext();
  };

  return (
    <AnimatedCard variant="static" className="p-8">
      <div className="mb-6">
        <StepHeader
          stepNumber={1}
          title="Select SIM Type"
          description="Choose between eSIM and physical SIM"
        />
      </div>
      <SimTypeSelector
        simType={simType}
        onSimTypeChange={setSimType}
        eid={eid}
        onEidChange={setEid}
        errors={{}}
      />
      <div className="flex justify-end mt-6">
        <Button onClick={handleContinue} rightIcon={<ArrowRightIcon className="w-4 h-4" />}>
          Continue to Activation
        </Button>
      </div>
    </AnimatedCard>
  );
}
