import { Star, Wifi, Car, Coffee, Waves } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

const accommodations = [
  {
    id: '1',
    name: 'Hotel Continental Luanda',
    location: 'Luanda',
    type: 'Hotel',
    stars: 5,
    price: 45000,
    rating: 4.8,
    reviews: 234,
    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&q=80',
    amenities: ['Wi-Fi', 'Piscina', 'Spa', 'Restaurante'],
    featured: true,
  },
  {
    id: '2',
    name: 'Resort Baía Azul',
    location: 'Benguela',
    type: 'Resort',
    stars: 5,
    price: 55000,
    rating: 4.9,
    reviews: 178,
    image: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=800&q=80',
    amenities: ['Praia Privativa', 'Piscina', 'Mergulho'],
    featured: true,
  },
  {
    id: '3',
    name: 'Pousada do Deserto',
    location: 'Namibe',
    type: 'Pousada',
    stars: 4,
    price: 25000,
    rating: 4.7,
    reviews: 89,
    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=800&q=80',
    amenities: ['Wi-Fi', 'Restaurante', 'Vista Deserto'],
  },
  {
    id: '4',
    name: 'Hotel Serra da Leba',
    location: 'Lubango',
    type: 'Hotel',
    stars: 4,
    price: 30000,
    rating: 4.6,
    reviews: 112,
    image: 'https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=800&q=80',
    amenities: ['Wi-Fi', 'Restaurante', 'Vista Panorâmica'],
  },
];

const amenityIcons: Record<string, React.ReactNode> = {
  'Wi-Fi': <Wifi className="h-4 w-4" />,
  'Piscina': <Waves className="h-4 w-4" />,
  'Pequeno-almoço': <Coffee className="h-4 w-4" />,
  'Estacionamento': <Car className="h-4 w-4" />,
};

export function FeaturedAccommodations() {
  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Alojamentos Recomendados</h2>
          <p className="text-gray-600 mt-2">
            Os melhores hotéis, pousadas e resorts selecionados para si
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {accommodations.map((acc) => (
            <Card
              key={acc.id}
              className="overflow-hidden group hover:shadow-xl transition-all duration-300"
            >
              <div className="relative aspect-4/3">
                <img
                  src={acc.image}
                  alt={acc.name}
                  className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-3 left-3 flex gap-2">
                  <Badge className="bg-white text-gray-900 hover:bg-white">
                    {acc.type}
                  </Badge>
                  {acc.featured && (
                    <Badge className="bg-orange-600">Destaque</Badge>
                  )}
                </div>
              </div>

              <CardContent className="p-4">
                <div className="flex items-center gap-1 mb-2">
                  {[...Array(acc.stars)].map((_, i) => (
                    <Star
                      key={i}
                      className="h-4 w-4 fill-yellow-400 text-yellow-400"
                    />
                  ))}
                </div>

                <h3 className="font-semibold text-lg text-gray-900 mb-1">
                  {acc.name}
                </h3>
                <p className="text-sm text-gray-500 mb-3">{acc.location}</p>

                <div className="flex flex-wrap gap-2 mb-3">
                  {acc.amenities.slice(0, 3).map((amenity) => (
                    <Badge
                      key={amenity}
                      variant="outline"
                      className="text-xs flex items-center gap-1"
                    >
                      {amenityIcons[amenity] || null}
                      {amenity}
                    </Badge>
                  ))}
                </div>

                <div className="flex justify-between items-center">
                  <div>
                    <span className="text-lg font-bold text-orange-600">
                      {acc.price.toLocaleString()} Kz
                    </span>
                    <p className="text-xs text-gray-500">por noite</p>
                  </div>
                  <Button size="sm" className="bg-orange-600 hover:bg-orange-700">
                    Reservar
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}