import { ListBoxItem } from 'react-aria-components'
import { Typography } from '../Typography'
import styles from './select.module.css'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { SelectItemProps } from './types'

export function SelectItem({
  children,
  icon,
  isDisabled,
  ...props
}: SelectItemProps) {
  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'

  return (
    <ListBoxItem
      className={styles.listBoxItem}
      textValue={children}
      isDisabled={isDisabled}
      {...props}
    >
      {({ isSelected }) => (
        <>
          {icon ? (
            <MaterialIcon
              icon={icon}
              size={24}
              color={iconColor}
              aria-hidden="true"
            />
          ) : null}
          <Typography
            variant={
              isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
            }
          >
            <span>{children}</span>
          </Typography>
        </>
      )}
    </ListBoxItem>
  )
}