"use client";

import { Button } from "@/components/atoms/button";
import { StepHeader } from "@/components/atoms";
import { InstallationOptions } from "../../InstallationOptions";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import type { InternetInstallationCatalogItem } from "@customer-portal/domain/catalog";

interface Props {
  installations: InternetInstallationCatalogItem[];
  selectedInstallation: InternetInstallationCatalogItem | null;
  setSelectedInstallationSku: (sku: string | null) => void;
  isTransitioning: boolean;
  onBack: () => void;
  onNext: () => void;
}

export function InstallationStep({
  installations,
  selectedInstallation,
  setSelectedInstallationSku,
  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={2}
          title="Installation"
          description="Choose your preferred installation method"
        />
      </div>

      <InstallationOptions
        installations={installations}
        selectedInstallationSku={selectedInstallation?.sku ?? null}
        onInstallationSelect={installation =>
          setSelectedInstallationSku(installation ? installation.sku : null)
        }
      />

      <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 Configuration
        </Button>
        <Button
          onClick={onNext}
          disabled={!selectedInstallation}
          rightIcon={<ArrowRightIcon className="w-4 h-4" />}
          className="min-w-[200px]"
        >
          Continue to Add-ons
        </Button>
      </div>
    </div>
  );
}
