110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { X, MapPin, Check, Truck } from 'lucide-react';
|
|
import { City } from '@/types';
|
|
import { formatCOP } from '@/lib/pricing-engine';
|
|
|
|
interface CitySelectorModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
cities: City[];
|
|
selectedCity: City;
|
|
onSelectCity: (city: City) => void;
|
|
}
|
|
|
|
export const CitySelectorModal: React.FC<CitySelectorModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
cities,
|
|
selectedCity,
|
|
onSelectCity,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-200">
|
|
<div className="bg-neutral-900 border border-purple-500/30 text-white rounded-3xl max-w-md w-full p-5 sm:p-6 shadow-[0_20px_50px_rgba(168,85,247,0.2)] relative space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between border-b border-neutral-800 pb-3">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 rounded-full bg-purple-500/20 border border-purple-400/30 flex items-center justify-center text-purple-400">
|
|
<MapPin className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-black text-white text-base">Selecciona tu Ciudad</h3>
|
|
<p className="text-xs text-neutral-400">Calculamos tiempos y tarifas oficiales</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-8 h-8 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 flex items-center justify-center transition-all cursor-pointer border border-neutral-700"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* City list */}
|
|
<div className="max-h-80 overflow-y-auto space-y-2 pr-1">
|
|
{cities
|
|
.filter((c) => c.isActive !== false)
|
|
.map((city) => {
|
|
const isSelected = selectedCity.id === city.id;
|
|
const hasCod = city.allowsContraentrega || city.allowCod;
|
|
|
|
return (
|
|
<div
|
|
key={city.id}
|
|
onClick={() => {
|
|
onSelectCity(city);
|
|
onClose();
|
|
}}
|
|
className={`p-3 rounded-2xl border transition-all cursor-pointer flex items-center justify-between ${
|
|
isSelected
|
|
? 'border-purple-400 bg-purple-950/50 shadow-[0_0_15px_rgba(168,85,247,0.2)]'
|
|
: 'border-neutral-800 hover:border-neutral-700 bg-neutral-950'
|
|
}`}
|
|
>
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="font-bold text-white text-sm">{city.name}</span>
|
|
{hasCod && (
|
|
<span className="text-[10px] bg-purple-500/20 text-purple-300 border border-purple-500/30 font-bold px-1.5 py-0.5 rounded">
|
|
Contraentrega
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-neutral-400 flex items-center gap-1">
|
|
<Truck className="w-3 h-3 text-purple-400" />
|
|
{city.deliveryTime}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xs font-black text-white">
|
|
{city.shippingCost === 0 ? (
|
|
<span className="text-purple-400 font-bold uppercase">Gratis</span>
|
|
) : (
|
|
formatCOP(city.shippingCost)
|
|
)}
|
|
</span>
|
|
{isSelected && (
|
|
<div className="w-5 h-5 rounded-full bg-purple-500 text-white flex items-center justify-center">
|
|
<Check className="w-3.5 h-3.5" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Info footer */}
|
|
<div className="bg-neutral-950 border border-neutral-800 rounded-xl p-3 text-[11px] text-neutral-400">
|
|
💡 <strong>En Cali y zona metropolitana:</strong> entregas el mismo día con mensajería directa y pago contraentrega.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|