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>
  )
}