import React from 'react'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import { type IconColorList, type IconStringList } from '../Icons/Icon.models'
import { type ButtonProps } from '../Button/Button.models'

export type EmptyStateProps = {
  /** Text to display in bold. */
  primaryText: string
  /** Optional secondary text beneath `primaryText`. */
  secondaryText?: string
  /** Optional icon to display at the top. */
  icon?: IconStringList
  /** Optional button to display at bottom. */
  buttonProps?: ButtonProps
  /** Optional prop to set the color of the icon */
  iconColor?: IconColorList
  /** Optional prop to add a test id to the EmptyState for QA testing */
  qaTestId?: string
}

const EmptyState = ({
  primaryText,
  secondaryText,
  icon,
  buttonProps,
  iconColor = 'purple',
  qaTestId = 'empty-state',
}: EmptyStateProps): React.JSX.Element => {
  return (
    <div
      className='flex w-full justify-center'
      data-testid='empty-state-component'
      qa-test-id={qaTestId}
    >
      <div className='flex max-w-md flex-col items-center gap-2 p-8 text-center'>
        {icon && <Icon icon={icon} iconSize='48px' color={iconColor} />}
        <div
          className='text-base font-bold text-dark-purple'
          data-testid='empty-state-primary-text'
        >
          {primaryText}
        </div>
        {secondaryText && (
          <div
            className='text-sm text-dark-purple'
            data-testid='empty-state-secondary-text'
          >
            {secondaryText}
          </div>
        )}
        {buttonProps ? (
          <Button styleType={'primary-blue'} {...buttonProps} />
        ) : null}
      </div>
    </div>
  )
}

export default EmptyState