import clsx from 'clsx'

import { DaoInfoCardsProps } from '@dao-dao/types'

import { TooltipInfoIcon } from '../tooltip'

export const DaoInfoCards = ({
  cards,
  className,
  wrap,
  valueClassName,
}: DaoInfoCardsProps) => (
  <div
    className={clsx(
      'grid grid-cols-2 gap-1 md:grid-cols-3 lg:grid-cols-4',
      className
    )}
  >
    {cards.map(({ Icon, label, tooltip, loading, warning, value }, index) => (
      <div
        key={index}
        className={clsx(
          'flex flex-col gap-1 rounded-md bg-background-tertiary px-3 py-2 xs:gap-2 xs:px-4 xs:py-3',
          loading && 'animate-pulse',
          warning && '!bg-background-interactive-warning'
        )}
      >
        <div className="flex flex-row items-center gap-1.5">
          {Icon && (
            <div className="mr-0.5 !text-xl flex flex-row items-center">
              <Icon
                className={
                  warning
                    ? '!text-icon-interactive-warning'
                    : '!text-icon-secondary'
                }
              />
            </div>
          )}

          <p
            className={clsx(
              'primary-text text-xs font-normal xs:text-sm',
              warning
                ? 'text-text-interactive-warning-title'
                : 'text-text-secondary'
            )}
          >
            {label}
          </p>

          {tooltip && (
            <TooltipInfoIcon
              iconClassName={warning ? '!text-icon-interactive-warning' : ''}
              size="xs"
              title={tooltip}
            />
          )}
        </div>

        <div
          className={clsx(
            'symbol-small-body-text min-w-0 truncate font-mono text-xs xs:text-sm',
            wrap && '!whitespace-normal',
            valueClassName
          )}
        >
          {/* Make sure to render 0. */}
          {value || typeof value === 'number' ? value : loading && '...'}
        </div>
      </div>
    ))}
  </div>
)