import { memo } from 'react';

import { IconChevronRight } from '@material-hu/icons/tabler';
import { appearFromBottom } from '@material-hu/utils/animations';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { JourneyListItemProps } from '../../types';

export type ListItemProps = {
  item: JourneyListItemProps;
  index: number;
};

export const ListItem = memo(({ item, index }: ListItemProps) => {
  return (
    <HuCardContainer
      fullWidth
      padding={0}
      badge={item.cardBadge}
      aria-disabled={item.listItem?.disabled}
      sx={{
        animation: `${appearFromBottom} 125ms ${index * 0.025}s ease-in-out backwards`,
        ...(item.listItem?.disabled && {
          backgroundColor: theme => theme.palette.new.background.layout.default,
        }),
      }}
      {...item.listItemWrapper}
    >
      <HuListItem
        {...item.listItem}
        action={{ Icon: IconChevronRight, disabled: true }}
      />
    </HuCardContainer>
  );
});

ListItem.displayName = 'ListItem';
