import type { ReactNode } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { Association } from "@/lib/models";
import { AssociationStatusBadge } from "./association-status-badge";

export function AssociationInfoCard({ association }: { association: Association }) {
  const fields: { label: string; value: ReactNode }[] = [
    { label: "Indirizzo", value: association.address || "—" },
    { label: "Partita IVA", value: association.vatNumber || "—" },
    { label: "Codice RUNTS", value: association.runtsId || "—" },
    { label: "Stato", value: <AssociationStatusBadge isShown={association.isShown} /> },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle>Informazioni generali</CardTitle>
      </CardHeader>
      <CardContent>
        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {fields.map((field) => (
            <div key={field.label}>
              <dt className="text-sm text-muted-foreground">{field.label}</dt>
              <dd className="mt-1 font-medium">{field.value}</dd>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  );
}