'use client';

import * as React from 'react';
import type { Notification } from '@/db/Notifications/type';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';

import { NotificationContent } from './notification-content';

interface NotificationItemProps {
  divider?: boolean;
  notification: Notification;
  onRemove?: () => void;
}

export function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
  return (
    <ListItem
      divider={divider}
      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
    >
      <NotificationContent notification={notification} />
      <Tooltip title="Remove">
        <IconButton
          edge="end"
          onClick={onRemove}
          size="small"
        >
          <XIcon />
        </IconButton>
      </Tooltip>
    </ListItem>
  );
}