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

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

  const metrics = [
    {
      icon: "📊",
      title: t.healthcareMetric1,
      description: t.healthcareMetric1Desc,
    },
    {
      icon: "🔄",
      title: t.healthcareMetric2,
      description: t.healthcareMetric2Desc,
    },
    {
      icon: "💰",
      title: t.healthcareMetric3,
      description: t.healthcareMetric3Desc,
    },
    {
      icon: "⚡",
      title: t.healthcareMetric4,
      description: t.healthcareMetric4Desc,
    },
    {
      icon: "📈",
      title: t.healthcareMetric5,
      description: t.healthcareMetric5Desc,
    },
    {
      icon: "⭐",
      title: t.healthcareMetric6,
      description: t.healthcareMetric6Desc,
    },
  ];

  return (
    <SectionContainer
      title={t.healthcareAnalyticsTitle}
      subtitle={t.healthcareAnalyticsSubtitle}
      background="gray"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {metrics.map((metric, index) => (
          <IconCard
            key={metric.title}
            icon={metric.icon}
            title={metric.title}
            description={metric.description}
            delay={index * 0.1}
          />
        ))}
      </div>
    </SectionContainer>
  );
}