import { FileTextIcon } from "lucide-react";

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

type InfoItem = { title: string; text: string };

export function InfoColumns({ title, items }: { title: string; items: readonly InfoItem[] }) {
  return (
    <Container className="py-12">
      <h2 className="mb-6 text-4xl font-semibold">{title}</h2>
      <div className="grid gap-4 md:grid-cols-3">
        {items.map((item) => (
          <ClinicalPanel key={item.title} className="p-6">
            <FileTextIcon className="mb-8 size-5 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>
        ))}
      </div>
    </Container>
  );
}