"use client";

import { Button } from "@/components/atoms/button";
import { StepHeader } from "@/components/atoms";
import { AddonGroup } from "@/features/catalog/components/base/AddonGroup";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import type { InternetAddonCatalogItem } from "@customer-portal/domain/catalog";

interface Props {
  addons: InternetAddonCatalogItem[];
  selectedAddonSkus: string[];
  onAddonToggle: (newSelectedSkus: string[]) => void;
  isTransitioning: boolean;
  onBack: () => void;
  onNext: () => void;
}

export function AddonsStep({
  addons,
  selectedAddonSkus,
  onAddonToggle,
  isTransitioning,
  onBack,
  onNext,
}: Props) {
  return (
    <div
      className={`bg-white rounded-2xl shadow-lg border border-gray-200/50 p-8 md:p-10 transition-all duration-150 ease-out ${
        isTransitioning ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"
      }`}
    >
      <div className="mb-8">
        <StepHeader
          stepNumber={3}
          title="Add-ons"
          description="Optional services to enhance your internet experience"
        />
      </div>

      <AddonGroup
        addons={addons}
        selectedAddonSkus={selectedAddonSkus}
        onAddonToggle={onAddonToggle}
        showSkus={false}
      />

      <div className="flex justify-between mt-8 pt-6 border-t border-gray-100">
        <Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
          Back to Installation
        </Button>
        <Button
          onClick={onNext}
          rightIcon={<ArrowRightIcon className="w-4 h-4" />}
          className="min-w-[200px]"
        >
          Review Order
        </Button>
      </div>
    </div>
  );
}
