"use client";

import { useConfiguratorStore } from "@/lib/store";
import { Check, Ruler, Wrench, MessageCircle, Truck } from "lucide-react";

const extraOptionsList = [
  {
    id: "Meetservice",
    label: "Meetservice",
    description: "Wij komen bij u langs om de exacte maten op te nemen.",
    icon: Ruler,
  },
  {
    id: "Montage",
    label: "Montage",
    description: "Professionele plaatsing door onze vakmensen.",
    icon: Wrench,
  },
  {
    id: "Adviesgesprek",
    label: "Adviesgesprek",
    description: "Vrijblijvend advies over mogelijkheden en materialen.",
    icon: MessageCircle,
  },
  {
    id: "Bezorging",
    label: "Bezorging",
    description: "Bezorging aan huis, of afhalen op locatie.",
    icon: Truck,
  },
];

export function StepExtras() {
  const { extraOptions, toggleExtraOption } = useConfiguratorStore();

  return (
    <div>
      <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Extra opties</h2>
      <p className="mb-6 text-sm text-gray-600">
        Selecteer eventuele extra services bij uw stalen deur.
      </p>

      <div className="grid gap-3">
        {extraOptionsList.map((option) => {
          const selected = extraOptions.includes(option.id);
          const Icon = option.icon;

          return (
            <button
              key={option.id}
              type="button"
              onClick={() => toggleExtraOption(option.id)}
              className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
                selected
                  ? "border-[#C4D668] bg-[#1A2E2E] text-white"
                  : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
              }`}
            >
              <div className="flex items-start gap-4">
                <div
                  className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${
                    selected ? "bg-[#C4D668]/20" : "bg-gray-100"
                  }`}
                >
                  <Icon className={`size-5 ${selected ? "text-[#C4D668]" : "text-[#1A2E2E]"}`} />
                </div>
                <div className="flex-1">
                  <h3 className="font-bold">{option.label}</h3>
                  <p className={`mt-1 text-sm ${selected ? "text-white/80" : "text-gray-500"}`}>
                    {option.description}
                  </p>
                </div>
                <div
                  className={`flex size-6 shrink-0 items-center justify-center rounded-md border-2 transition-all ${
                    selected
                      ? "border-[#C4D668] bg-[#C4D668]"
                      : "border-gray-300 bg-white"
                  }`}
                >
                  {selected && <Check className="size-4 text-[#1A2E2E]" />}
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}