"use client";

import { motion } from "framer-motion";
import type { Country } from "@/services/regions";

interface CountriesListProps {
  countries: Country[];
}

const COUNTRY_FLAGS: Record<string, string> = {
  // West Africa
  Nigeria: "🇳🇬",
  Ghana: "🇬🇭",
  Senegal: "🇸🇳",
  Côte: "🇨🇮",
  "Ivory Coast": "🇨🇮",
  Cameroon: "🇨🇲",
  "Sierra Leone": "🇸🇱",
  Liberia: "🇱🇷",
  Mali: "🇲🇱",
  Guinea: "🇬🇳",
  Benin: "🇧🇯",
  Togo: "🇹🇬",
  "Burkina Faso": "🇧🇫",

  // East Africa
  Kenya: "🇰🇪",
  Tanzania: "🇹🇿",
  Uganda: "🇺🇬",
  Ethiopia: "🇪🇹",
  Somalia: "🇸🇴",
  Mozambique: "🇲🇿",
  Malawi: "🇲🇼",
  Zambia: "🇿🇲",
  Zimbabwe: "🇿🇼",
  Madagascar: "🇲🇬",
  Rwanda: "🇷🇼",
  Burundi: "🇧🇮",
  Sudan: "🇸🇩",
  "South Sudan": "🇸🇸",
  Djibouti: "🇩🇯",
  Eritrea: "🇪🇷",

  // Central Africa
  Congo: "🇨🇬",
  "Democratic Republic of the Congo": "🇨🇩",
  DRC: "🇨🇩",
  "Republic of Congo": "🇨🇬",
  "Central African Republic": "🇨🇫",
  Gabon: "🇬🇦",
  Equatorial: "🇬🇶",
  "Equatorial Guinea": "🇬🇶",
  "São Tomé": "🇸🇹",
  "São Tomé and Príncipe": "🇸🇹",
  Chad: "🇹🇩",

  // Southern Africa
  "South Africa": "🇿🇦",
  Botswana: "🇧🇼",
  Namibia: "🇳🇦",
  Lesotho: "🇱🇸",
  "North Africa": "🇩🇿",
  Algeria: "🇩🇿",
  Morocco: "🇲🇦",
  Tunisia: "🇹🇳",
  Libya: "🇱🇾",
  Egypt: "🇪🇬",

  // Middle East
  "Saudi Arabia": "🇸🇦",
  "United Arab Emirates": "🇦🇪",
  UAE: "🇦🇪",
  Qatar: "🇶🇦",
  Bahrain: "🇧🇭",
  Oman: "🇴🇲",
  Kuwait: "🇰🇼",
  "United Kingdom": "🇬🇧",
  UK: "🇬🇧",
};

const CountriesList = ({ countries }: CountriesListProps) => {
  if (!countries || countries.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        No countries listed for this region.
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {countries.map((country, index) => {

        return (
          <motion.div
            key={country.id}
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.05, duration: 0.3 }}
            className="petro-card p-6 flex items-center gap-4 hover:shadow-lg transition-shadow"
          >
            {/* <span className="text-5xl">{flag}</span> */}
            <span className="font-semibold text-foreground text-sm">
              {country.name}
            </span>
          </motion.div>
        );
      })}
    </div>
  );
};

export default CountriesList;