import type { ComponentType } from "react";

import { carePillars } from "@/entities/site-content";
import { ClinicalPanel } from "@/shared/ui/clinical-panel";
import { Container } from "@/shared/ui/container";

type IconComponent = ComponentType<{ className?: string }>;
type IconItem = { title: string; text: string; icon: IconComponent };

export function IconCards({ items = carePillars }: { items?: readonly IconItem[] }) {
  return (
    <Container className="grid gap-4 py-12 md:grid-cols-3">
      {items.map((item) => {
        const Icon = item.icon;
        return (
          <ClinicalPanel key={item.title} className="p-6">
            <Icon className="mb-8 size-6 text-primary" />
            <h3 className="text-xl font-semibold">{item.title}</h3>
            <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
          </ClinicalPanel>
        );
      })}
    </Container>
  );
}