"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import type { Region } from "@/services/regions";

interface RegionsGridProps {
  regions: Region[];
}

const RegionsGrid = ({ regions }: RegionsGridProps) => {
  return (
    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
      {regions.map((region, index) => (
        <Link key={region.id} href={`/regions/${region.slug}`}>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1, duration: 0.5 }}
            whileHover={{ y: -5 }}
            className="petro-card p-8 group h-full cursor-pointer"
          >
            <div className="absolute top-0 left-0 w-1 h-0 bg-accent transition-all duration-300 group-hover:h-full" />
            <h3 className="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
              {region.name}
            </h3>
            {region.countries && region.countries.length > 0 && (
              <div className="mb-6">
                <p className="text-sm font-semibold text-muted-foreground uppercase tracking-widest mb-3">
                  Countries
                </p>
                <div className="flex flex-wrap gap-2">
                  {region.countries.slice(0, 3).map((country) => (
                    <span
                      key={country}
                      className="px-3 py-1 bg-secondary text-foreground text-xs rounded"
                    >
                      {country}
                    </span>
                  ))}
                  {region.countries.length > 3 && (
                    <span className="px-3 py-1 bg-secondary text-foreground text-xs rounded">
                      +{region.countries.length - 3} more
                    </span>
                  )}
                </div>
              </div>
            )}
            <div className="flex items-center text-xs font-bold uppercase tracking-widest text-accent opacity-0 group-hover:opacity-100 transition-all translate-y-2 group-hover:translate-y-0">
              View Details →
            </div>
          </motion.div>
        </Link>
      ))}
    </div>
  );
};

export default RegionsGrid;