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 }: SelectItemProps) {
  return (
    <ListBoxItem
      className={styles.listBoxItem}
      textValue={children}
      isDisabled={isDisabled}
    >
      {({ isSelected }) => (
        <>
          {icon ? (
            <MaterialIcon
              icon={icon}
              size={24}
              color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'}
              aria-hidden="true"
            />
          ) : null}
          <Typography
            variant={
              isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
            }
          >
            <span>{children}</span>
          </Typography>
        </>
      )}
    </ListBoxItem>
  )
}