import type { ReactNode } from 'react';
import React from 'react';

import { useScreenHasMinWidth } from '../../hooks/useScreenHasMinWidth';
import { Icon } from '../Icon/Icon';
import type { IconName } from '../Icon/IconName';
import { IconButton } from '../IconButton/IconButton';
import { Tooltip } from '../Tooltip/Tooltip';

export interface StatsCardProps {
  /**
   * The main value displayed in the stats card.
   * This is typically a numeric value or a string that represents a statistic.
   */
  value: string;
  /**
   * The title displayed on the stats card.
   */
  title: string;
  /**
   * Optional icon to display on the top left corner of the stats card.
   */
  icon?: IconName;
  /**
   * Tooltip content to display when hovering over the info icon.
   */
  tooltip?: ReactNode;
  /**
   * Optional description to display below the title.
   */
  description?: string;
}

export const StatsCard: React.FC<StatsCardProps> = ({ value, title, icon, tooltip, description, ...rest }) => {
  const isXLScreen = useScreenHasMinWidth('xl');

  return (
    <div {...rest} className='statsCard'>
      <div className='statsCard__flexRow'>
        <div className='statsCard__value'>{value}</div>
        {tooltip && (
          <Tooltip content={tooltip}>
            <IconButton ghost icon='shp-info' />
          </Tooltip>
        )}
      </div>
      {icon && (
        <span className='statsCard__icon'>
          <Icon icon={icon} size={isXLScreen ? 'lg' : 'md'} variant='secondary' />
        </span>
      )}
      <p className='statsCard__title'>{title}</p>
      {description && <p className='statsCard__description'>{description}</p>}
    </div>
  );
};