import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from './utils'

export interface DataFieldProps extends HTMLAttributes<HTMLDivElement> {
  label: string
  children: ReactNode
}

const DataField = forwardRef<HTMLDivElement, DataFieldProps>(
  ({ label, className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('rounded-lg border border-border-glass bg-glass px-3 py-2', className)}
      {...props}
    >
      <p className="text-foreground-tertiary text-[11px] font-semibold tracking-wide uppercase">
        {label}
      </p>
      <div className="mt-1 min-w-0 break-words text-sm text-foreground-secondary">{children}</div>
    </div>
  )
)
DataField.displayName = 'DataField'

export interface MetadataGridProps extends HTMLAttributes<HTMLDivElement> {
  columns?: 2 | 3 | 4
  children: ReactNode
}

const MetadataGrid = forwardRef<HTMLDivElement, MetadataGridProps>(
  ({ columns = 3, className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'grid gap-3',
        columns === 2 && 'md:grid-cols-2',
        columns === 3 && 'md:grid-cols-2 xl:grid-cols-3',
        columns === 4 && 'md:grid-cols-2 xl:grid-cols-4',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
)
MetadataGrid.displayName = 'MetadataGrid'

export { DataField, MetadataGrid }
