import { FC } from 'react';

import ListItem from '@material-hu/mui/ListItem';
import ListItemText from '@material-hu/mui/ListItemText';

import { Topic } from 'src/types/tickets';

import { TicketChatAvatar } from 'src/components/dashboard/chat/ChatAvatar';

export type TicketItemProps = {
  topic?: Topic;
  onSelect?: (Topic) => void;
};

const TicketItem: FC<TicketItemProps> = props => {
  const { topic, onSelect } = props;

  return (
    <ListItem
      key={topic.id}
      button
      onClick={() => onSelect(topic)}
    >
      <TicketChatAvatar
        topic={topic}
        sx={{
          height: 32,
          width: 32,
        }}
      />
      <ListItemText
        primary={topic.name}
        primaryTypographyProps={{
          color: 'textPrimary',
          noWrap: true,
          variant: 'subtitle2',
        }}
      />
    </ListItem>
  );
};

export default TicketItem;