import type { ReactNode } from "react";

export type DetailRow = {
  label: string;
  value?: string | ReactNode;
};

function MultilineValue({ value }: { value: string }) {
  const lines = value.split(" | ");
  if (lines.length === 1) return <>{value}</>;
  return (
    <span className="flex flex-col gap-2">
      {lines.map((line, i) => (
        <span key={i}>{line}</span>
      ))}
    </span>
  );
}

export function DetailTable({ rows }: { rows: DetailRow[] }) {
  const filtered = rows.filter((row) => row.value);
  if (filtered.length === 0) return null;

  return (
    <table className="w-full text-left text-sm">
      <tbody className="divide-y-1 divide-lighttext/10 dark:divide-darktext/10">
        {filtered.map((row, i) => (
          <tr key={i}>
            <td className="w-45 py-4 pr-4 align-middle break-words text-lightsec dark:text-darksec">
              {row.label}
            </td>
            <td className="py-4 align-middle break-words text-lighttext dark:text-darktext">
              {typeof row.value === "string" ? <MultilineValue value={row.value} /> : row.value}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}