import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type KeyValueItem = {
  label: string;
  value: string;
  helper?: string;
};

export type KeyValueListProps = {
  title: string;
  items: KeyValueItem[];
};

export function KeyValueList({ title, items }: KeyValueListProps) {
  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle className="text-base">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <dl className="space-y-3">
          {items.map((item) => (
            <div key={item.label} className="flex flex-wrap justify-between gap-2">
              <dt className="text-sm text-muted-foreground">{item.label}</dt>
              <dd className="text-sm font-semibold text-foreground">
                {item.value}
                {item.helper ? (
                  <span className="ml-2 text-xs text-muted-foreground">
                    {item.helper}
                  </span>
                ) : null}
              </dd>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  );
}
Detalles del componente
