import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export function List({
  items,
}: {
  items: { meta?: ReactNode; title: ReactNode }[];
}) {
  return (
    <div className="overflow-hidden rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)]">
      {items.map((item, index) => (
        <div
          className={cn(
            "flex items-center justify-between gap-4 px-4 py-3",
            index > 0 ? "border-t border-[var(--uhuru-border-subtle)]" : "",
          )}
          key={index}
        >
          <div className="text-sm text-[var(--uhuru-text-primary)]">{item.title}</div>
          {item.meta ? <div className="text-sm text-[var(--uhuru-text-secondary)]">{item.meta}</div> : null}
        </div>
      ))}
    </div>
  );
}