import * as React from 'react';
import { clsx } from 'clsx';

export interface DataListProps extends React.HTMLAttributes<HTMLDivElement> {
  density?: 'compact' | 'normal' | 'spacious';
}

const densityClasses: Record<NonNullable<DataListProps['density']>, string> = {
  compact: 'gap-1',
  normal: 'gap-2',
  spacious: 'gap-3',
};

export function DataList({ density = 'normal', className, children, ...props }: DataListProps) {
  return (
    <div className={clsx('grid', densityClasses[density], className)} {...props}>
      {children}
    </div>
  );
}

export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement> {
  selected?: boolean;
}

export function DataListItem({ selected, className, children, ...props }: DataListItemProps) {
  return (
    <div
      data-selected={selected ? 'true' : undefined}
      className={clsx(
        'rounded-lg border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-3 text-[var(--bl-text-primary)]',
        selected && 'border-[var(--bl-accent)] bg-[var(--bl-accent-muted,var(--bl-surface-muted))]',
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export interface DataListMetaProps extends React.HTMLAttributes<HTMLDivElement> {}

export function DataListMeta({ className, children, ...props }: DataListMetaProps) {
  return (
    <div
      className={clsx(
        'flex flex-wrap items-center gap-2 text-xs text-[var(--bl-text-secondary)]',
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}
