import { forwardRef } from 'react';

import {
  autocompleteClasses,
  Stack,
  type StackProps,
  useTheme,
} from '@mui/material';

const AutocompleteItem = forwardRef<HTMLLIElement, StackProps<'li'>>(
  ({ children, ...props }, ref) => {
    const theme = useTheme();
    return (
      <Stack
        component="li"
        ref={ref}
        {...props}
        sx={{
          flexDirection: 'row',
          [`&.${autocompleteClasses.option}`]: {
            transition: 'background-color 0.125s ease',
            padding: theme.spacing(2),
          },
          [`&.${autocompleteClasses.option}:hover`]: {
            backgroundColor: theme.palette.new.action.background.neutral.hover,
          },
          ...props.sx,
        }}
      >
        {children}
      </Stack>
    );
  },
);
AutocompleteItem.displayName = 'AutocompleteItem';

export default AutocompleteItem;
