"use client";
import { Truck, Warehouse } from "lucide-react";
import { Card } from "@/components/ui/card";
import { useTranslations } from "next-intl";
import type { DeliveryType } from "@/lib/types/api";

interface DeliveryTypeSelectorProps {
  selectedType: DeliveryType;
  onSelect: (type: DeliveryType) => void;
}

export default function DeliveryTypeSelector({
  selectedType,
  onSelect,
}: DeliveryTypeSelectorProps) {
  const t = useTranslations();

  const deliveryOptions: {
    type: DeliveryType;
    label: string;
    icon: typeof Truck;
  }[] = [
    { type: "SELECTED_DELIVERY", label: t("delivery"), icon: Truck },
    { type: "PICK_UP", label: t("pickup"), icon: Warehouse },
  ];

  return (
    <div className="mb-8">
      <h3 className="text-lg font-bold mb-4 text-gray-900">
        {t("delivery_type")}
      </h3>
      <div className="flex gap-3">
        {deliveryOptions.map(({ type, label, icon: Icon }) => (
          <Card
            key={type}
            className={`flex-1 cursor-pointer transition-all duration-200 hover:shadow-md rounded-lg ${
              selectedType === type
                ? "border-2 border-gray-900 bg-gray-50 shadow-md"
                : "border-2 border-gray-200 hover:border-gray-400"
            }`}
            onClick={() => onSelect(type)}
          >
            <div className="flex flex-col items-center justify-center p-5 gap-3">
              <div
                className={`h-12 w-12 rounded-lg flex items-center justify-center transition-colors ${
                  selectedType === type ? "bg-gray-900" : "bg-gray-100"
                }`}
              >
                <Icon
                  className={`h-6 w-6 transition-colors ${
                    selectedType === type ? "text-white" : "text-gray-700"
                  }`}
                />
              </div>
              <span
                className={`text-sm font-semibold transition-colors ${
                  selectedType === type ? "text-gray-900" : "text-gray-600"
                }`}
              >
                {label}
              </span>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}
