import type { ReactNode } from "react";
import clsx from "clsx";

import { CopyButton } from "./CopyButton";

type InfoRowProps = {
  label: string;
  children: ReactNode;
  copyValue?: string | number | null;
  copyMessage?: string;
  className?: string;
};

export const InfoRow = ({ label, children, copyValue, copyMessage, className }: InfoRowProps) => {
  const canCopy = copyValue !== null && copyValue !== undefined && `${copyValue}`.length > 0;

  return (
    <div
      className={clsx(
        "flex flex-col gap-1 overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 p-3",
        className,
      )}
    >
      <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
      <div className="flex items-start gap-2 text-sm text-slate-100">
        <div className="min-w-0 break-words text-left">{children}</div>
        {canCopy ? (
          <CopyButton
            value={copyValue as string | number}
            aria-label={`Скопировать значение «${label}»`}
            successMessage={copyMessage}
            className="mt-0.5"
          />
        ) : null}
      </div>
    </div>
  );
};