import { type HTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface DataRowProps extends HTMLAttributes<HTMLDivElement> {
  label: string;
  value: ReactNode;
  icon?: ReactNode;
  hint?: string;
}

export function DataRow({
  label,
  value,
  icon,
  hint,
  className,
  ...props
}: DataRowProps) {
  return (
    <div
      className={cn(
        "flex min-h-11 items-start gap-3 border-b border-border py-3 last:border-b-0",
        className,
      )}
      {...props}
    >
      {icon ? (
        <span
          className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg bg-surface-elevated text-brand-green"
          aria-hidden="true"
        >
          {icon}
        </span>
      ) : null}
      <div className="min-w-0 flex-1">
        <p className="font-inter text-xs font-medium uppercase tracking-wide text-muted">
          {label}
        </p>
        <p className="mt-0.5 font-inter text-sm font-medium text-ink">{value}</p>
        {hint ? (
          <p className="mt-0.5 font-inter text-xs text-muted">{hint}</p>
        ) : null}
      </div>
    </div>
  );
}

export function DataRowList({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLDListElement>) {
  return (
    <dl className={cn("divide-y divide-border", className)} {...props}>
      {children}
    </dl>
  );
}