"use client";
import SectionContainer from "../shared/SectionContainer";
import FeatureCard from "../shared/FeatureCard";
import { UI, type Lang } from "@/lib/config";

export default function AdminFeaturesSection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;

  const features = [
    {
      icon: "🏢",
      title: t.healthcareAdminMultiLocation,
      description: t.healthcareAdminMultiLocationDesc,
      gradient: "from-blue-50 to-indigo-50",
    },
    {
      icon: "🔑",
      title: t.healthcareAdminRoles,
      description: t.healthcareAdminRolesDesc,
      gradient: "from-purple-50 to-pink-50",
    },
    {
      icon: "👨‍⚕️",
      title: t.healthcareAdminDoctorPortal,
      description: t.healthcareAdminDoctorPortalDesc,
      gradient: "from-emerald-50 to-teal-50",
    },
    {
      icon: "📨",
      title: t.healthcareAdminOwnerDigest,
      description: t.healthcareAdminOwnerDigestDesc,
      gradient: "from-amber-50 to-orange-50",
    },
  ];

  return (
    <SectionContainer
      title={t.healthcareAdminFeaturesTitle}
      subtitle={t.healthcareAdminFeaturesSubtitle}
      background="white"
    >
      <div className="grid md:grid-cols-2 gap-6">
        {features.map((feature, index) => (
          <FeatureCard
            key={feature.title}
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
            gradient={feature.gradient}
            delay={index * 0.15}
          />
        ))}
      </div>
    </SectionContainer>
  );
}