import type { MetadataItem } from "@/types/media-ui";

interface MetadataPanelProps {
  title?: string;
  items: MetadataItem[];
  columns?: 1 | 2 | 3 | 4;
}

function getColumnsClass(columns: MetadataPanelProps["columns"]) {
  switch (columns) {
    case 1:
      return "sm:grid-cols-1";
    case 2:
      return "sm:grid-cols-2";
    case 4:
      return "sm:grid-cols-2 xl:grid-cols-4";
    case 3:
    default:
      return "sm:grid-cols-2 xl:grid-cols-3";
  }
}

export function MetadataPanel({
  title = "Metadata",
  items,
  columns = 3
}: MetadataPanelProps) {
  return (
    <section className="glass-panel rounded-2xl border border-white/10 p-4">
      <h3 className="font-[var(--font-space-grotesk)] text-base font-medium text-white">{title}</h3>
      {items.length === 0 ? (
        <p className="mt-3 text-sm text-slate-400">No metadata available yet.</p>
      ) : (
        <dl className={`mt-3 grid gap-3 ${getColumnsClass(columns)}`}>
          {items.map((item) => (
            <div key={item.key} className="rounded-lg border border-white/10 bg-white/5 p-3 transition hover:border-white/20">
              <dt className="text-xs uppercase tracking-wide text-slate-400">{item.label}</dt>
              <dd className="mt-1 text-sm text-slate-100">{item.value}</dd>
            </div>
          ))}
        </dl>
      )}
    </section>
  );
}
