import * as React from "react"
import { cn } from "cn"

// Intended consumers: transactions, channels, and accounts.

export type DataListRootProps = React.ComponentProps<"div"> & {
  columns: string
}

function DataListRoot({
  className,
  columns,
  style,
  ...props
}: DataListRootProps) {
  return (
    <div
      data-slot="data-list"
      className={cn(
        "overflow-hidden rounded-lg border border-border/70 bg-card",
        className
      )}
      style={{ ...style, "--data-list-cols": columns } as React.CSSProperties}
      {...props}
    />
  )
}

function DataListHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="data-list-header"
      className={cn(
        "hidden grid-cols-[var(--data-list-cols)] items-center gap-3 border-b bg-muted/30 px-4 py-2 text-[11px] font-medium text-muted-foreground md:grid",
        className
      )}
      {...props}
    />
  )
}

export type DataListHeadProps = React.ComponentProps<"span"> & {
  align?: "left" | "center" | "right"
}

function DataListHead({
  align = "left",
  className,
  ...props
}: DataListHeadProps) {
  return (
    <span
      data-slot="data-list-head"
      className={cn(
        align === "right" && "text-right",
        align === "center" && "text-center",
        className
      )}
      {...props}
    />
  )
}

function DataListBody({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="data-list-body"
      className={cn("divide-y divide-border/60", className)}
      {...props}
    />
  )
}

function DataListRow({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="data-list-row"
      className={cn(
        "flex flex-col gap-2 p-3 transition-colors hover:bg-muted/30 md:grid md:grid-cols-[var(--data-list-cols)] md:items-center md:gap-3 md:px-4 md:py-3",
        className
      )}
      {...props}
    />
  )
}

export type DataListCellProps = React.ComponentProps<"div"> & {
  label?: React.ReactNode
  labelClassName?: string
  align?: "left" | "center" | "right"
}

function DataListCell({
  align = "left",
  children,
  className,
  labelClassName,
  label,
  ...props
}: DataListCellProps) {
  return (
    <div
      data-slot="data-list-cell"
      className={cn(
        align === "right" && "md:text-right",
        align === "center" && "md:text-center",
        className
      )}
      {...props}
    >
      {label != null && (
        <span className={cn("text-muted-foreground md:hidden", labelClassName)}>
          {label}
        </span>
      )}
      {children}
    </div>
  )
}

export const DataList = Object.assign(DataListRoot, {
  Header: DataListHeader,
  Head: DataListHead,
  Body: DataListBody,
  Row: DataListRow,
  Cell: DataListCell,
})