"use client";

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

export function AddonsStep({
  addons,
  selectedAddons,
  setSelectedAddons,
  planType,
  onNext,
  onBack,
}: AddonsStepProps) {
  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={3}
          title="Add-ons"
          description="Optional services to enhance your experience"
        />
      </div>
      {addons.length > 0 ? (
        <AddonGroup
          addons={addons}
          selectedAddonSkus={selectedAddons}
          onAddonToggle={setSelectedAddons}
          showSkus={false}
        />
      ) : (
        <div className="text-center py-8">
          <p className="text-muted-foreground">
            {planType === "DataOnly"
              ? "No add-ons are available for data-only plans."
              : "No add-ons are available for this plan."}
          </p>
        </div>
      )}
      <div className="flex justify-between mt-6">
        <Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
          Back to Activation
        </Button>
        <Button onClick={onNext} rightIcon={<ArrowRightIcon className="w-4 h-4" />}>
          Continue to Number Porting
        </Button>
      </div>
    </AnimatedCard>
  );
}
