import * as React from "react"

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

export type DescriptionListItem = {
  term: React.ReactNode
  description: React.ReactNode
}

export type DescriptionListProps = React.ComponentProps<"dl"> & {
  items?: DescriptionListItem[]
  columns?: 1 | 2 | 3
}

function DescriptionList({ items, columns = 1, className, children, ...props }: DescriptionListProps) {
  return (
    <dl
      data-slot="description-list"
      data-columns={columns}
      className={cn(
        "grid overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-card-bg,var(--card))] text-sm",
        columns === 2 && "sm:grid-cols-2",
        columns === 3 && "sm:grid-cols-2 lg:grid-cols-3",
        className
      )}
      {...props}
    >
      {items?.map((item, index) => (
        <DescriptionListRow key={index} term={item.term}>
          {item.description}
        </DescriptionListRow>
      )) ?? children}
    </dl>
  )
}

export type DescriptionListRowProps = React.ComponentProps<"div"> & {
  term: React.ReactNode
}

function DescriptionListRow({ term, className, children, ...props }: DescriptionListRowProps) {
  return (
    <div
      data-slot="description-list-row"
      className={cn("grid gap-1 border-b border-[color:var(--aui-card-border,var(--border))] p-4 last:border-b-0", className)}
      {...props}
    >
      <dt className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">{term}</dt>
      <dd className="min-w-0 text-foreground">{children}</dd>
    </div>
  )
}

export { DescriptionList, DescriptionListRow }