import { FC } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  CreditCard,
  Briefcase,
  Plane,
  Users,
  Ribbon,
  Building2,
  LineChart,
} from "lucide-react";

type ServiceItem = {
  title: string;
  subtitle: string;
  icon: React.ReactNode;
  badge?: string;
  badgeColor?: string;
  link: string;
};

const services: ServiceItem[] = [
  {
    title: "Credit Card",
    subtitle: "Find the perfect credit card for your lifestyle and benefit.",
    icon: <CreditCard size={20} />,
    badge: "New",
    badgeColor: "bg-orange-600",
    link: "/creditcards",
  },
  {
    title: "Personal Loans",
    subtitle: "Affordable loans with flexible repayment options",
    icon: <LineChart size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/loan",
  },
  {
    title: "Bank Accounts",
    subtitle: "Secure and flexible banking solutions for all your needs.",
    icon: <Building2 size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/bankaccounts",
  },
  {
    title: "Corporate & SME",
    subtitle: "Plan for your future with tailored financial advice.",
    icon: <Users size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/corporatesme",
  },
  {
    title: "Mortgage Services",
    subtitle: "Navigate the home-buying process with expert guidance.",
    icon: <Plane size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/mortgageservices",
  },
  {
    title: "NRI Services",
    subtitle: "Grow your wealth with smart investment options.",
    icon: <Briefcase size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/nriservices",
  },
  {
    title: "Referral",
    subtitle: "Maximize your assets with expert wealth management services.",
    icon: <Ribbon size={20} />,
    badge: "",
    badgeColor: "bg-green-600",
    link: "/referral",
  },
];

const ServicesPlugin: FC = () => {
  return (
    <div className="max-w-6xl mx-auto p-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 place-items-center">
        {services.map((service, index) => (
          <Link href={service.link} key={index} className="w-full max-w-[250px]">
            <Card className="relative w-full h-full p-4 flex flex-col items-center text-center shadow-md hover:shadow-lg transition-all cursor-pointer">
              {service.badge && (
                <Badge
                  className={`absolute top-1 right-1 text-xs px-2 py-0.5 text-white ${service.badgeColor}`}
                >
                  {service.badge}
                </Badge>
              )}
              <CardContent className="flex flex-col items-center space-y-2">
                <div className="text-blue-600 text-lg">{service.icon}</div>
                <h3 className="text-sm font-semibold">{service.title}</h3>
                <p className="text-xs text-gray-500">{service.subtitle}</p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default ServicesPlugin;
export const metadata = {
  title: "Services",
  description: "Explore our range of financial services tailored for you.",
};
export const dynamic = "force-dynamic"; // Ensures the page is always fresh
export const revalidate = 60; // Revalidate every 60 seconds
export const runtime = "edge"; // Use edge runtime for better performance
export const preferredRegion = "auto"; // Automatically select the best region for performance
export const fetchCache = "force-no-store"; // Disable caching for this page
export const dynamicParams = false; // Disable dynamic parameters for this page
export const fetchPolicy = "no-cache"; // Ensure no caching for data fetching
export const runtimeCache = "no-store"; // Disable runtime caching for this page
export const revalidateTag = "services"; // Tag for revalidation