import type { ComponentType, ReactNode } from "react";
import type { LucideProps } from "lucide-react";

import { cn } from "@/lib/utils";

export function DefList({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <dl className={cn("divide-y divide-[var(--hairline-soft)]", className)}>
      {children}
    </dl>
  );
}

export function DefItem({
  icon: Icon,
  label,
  value,
}: {
  icon?: ComponentType<LucideProps>;
  label: string;
  value: ReactNode;
}) {
  return (
    <div className="grid gap-1 py-3 first:pt-0 last:pb-0">
      <dt className="flex items-center gap-1.5 text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
        {Icon ? <Icon className="h-3.5 w-3.5 [stroke-width:1.7]" /> : null}
        {label}
      </dt>
      <dd className="text-sm font-medium text-[var(--ink)] [overflow-wrap:anywhere] [font-variant-numeric:tabular-nums]">
        {value}
      </dd>
    </div>
  );
}

export function EmptyDefValue({
  children = "Noch nicht hinterlegt",
}: {
  children?: ReactNode;
}) {
  return (
    <span className="font-normal italic text-[var(--ink-faint)]">
      {children}
    </span>
  );
}
