"use client";

import { Check } from "lucide-react";

interface Package {
  id: number;
  name: string;
  location: string;
  priceFrom: string;
  currency: string;
  includes: string[];
}

export default function PackagesSection({ packages }: { packages: Package[] }) {
  return (
    <section id="packages" className="py-12 bg-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {packages.map((pkg, i) => (
            <div
              key={pkg.id}
              className="bg-white border border-slate-100 rounded-xl p-5 hover:shadow-lg transition-all hover:-translate-y-1 animate-fade-in-up"
              style={{ animationDelay: `${i * 100}ms` }}
            >
              <h3 className="text-sm font-bold text-slate-900 mb-1">{pkg.name}</h3>
              <p className="text-xs text-slate-400 mb-3">{pkg.location}</p>
              <p className="text-xs text-slate-500 mb-0.5">From</p>
              <p className="text-xl font-bold text-slate-900 mb-3">
                <span className="text-base font-normal">৳</span>{" "}
                {Number(pkg.priceFrom).toLocaleString("en-IN")}
              </p>
              <ul className="space-y-1 mb-4">
                {pkg.includes.map((item) => (
                  <li key={item} className="flex items-start gap-1.5 text-xs text-slate-500">
                    <span className="text-green-400 mt-0.5">–</span>
                    {item}
                  </li>
                ))}
              </ul>
              <button className="w-full border border-green-500 text-green-700 hover:bg-green-50 text-xs font-semibold py-2 rounded-lg transition-colors">
                Request Quote
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}