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

type ServiceItem = {
  title: string;
  subtitle: string;
  icon: React.ReactNode;
  badge?: string;
  badgeColor?: 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" },
  { title: "Personal Loans", subtitle: "Affordable loans with flexible repayment options", icon: <LineChart size={20} />, badge: "", badgeColor: "bg-green-600" },
  { title: "Bank Accounts", subtitle: " Secure and flexible banking solutions for all your needs.", icon: <Building2 size={20} />, badge: "", badgeColor: "bg-green-600" },
  { title: "Corporate & SME ", subtitle: " Plan for your future with tailored financial advice.", icon: <Users size={20} /> },
  { title: "Mortgage Services", subtitle: "Navigate the home-buying process with expert guidance.", icon: <Plane size={20} />, badge: "", badgeColor: "bg-green-600" },
  { title: "NRI Services", subtitle: "Grow your wealth with smart investment options.", icon: <Briefcase size={20} />, badge: "", badgeColor: "bg-green-600" },
  { title: "Referral", subtitle: " Maximize your assets with expert wealth management services.", icon: <Ribbon size={20} />, badge: "", badgeColor: "bg-green-600" },
];

const ServicesPlugin: FC = () => {
  return (
    <div className="container mx-auto p-4">
      {/* Use flex for horizontal layout */}
      <div className="flex flex-row gap-2 overflow-x-auto">
        {services.map((service, index) => (
          <Card
            key={index}
            className="relative p-2 min-w-[120px] flex flex-col items-center text-center shadow-md hover:shadow-lg transition-all"
          >
            {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-1">
              {/* Small icon */}
              <div className="text-blue-600 text-lg">{service.icon}</div>
              {/* Small title */}
              <h3 className="text-xs font-semibold">{service.title}</h3>
              {/* Small subtitle */}
              <p className="text-[10px] text-gray-500">{service.subtitle}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};
export default ServicesPlugin;