import React from 'react';
import { Button } from 'antd';
import cn from 'classnames';
import stl from './listItem.module.css';
import AlertTypeLabel from '../AlertTypeLabel';

function ListItem({ alert, onClear, loading }: any) {
  return (
    <div className={cn(stl.wrapper, 'group', { [stl.viewed]: alert.viewed })}>
      <div className="flex justify-between items-center">
        <div className="text-sm">
          {alert.createdAt && alert.createdAt.toFormat('LLL dd, yyyy, hh:mm a')}
        </div>
        <div
          className={cn('invisible', { 'group-hover:visible': !alert.viewed })}
        >
          <Button type="text" loading={loading}>
            <span
              className={cn('text-sm color-gray-medium', {
                invisible: loading,
              })}
              onClick={onClear}
            >
              IGNORE
            </span>
          </Button>
        </div>
      </div>
      <AlertTypeLabel
        type={alert.options.sourceMeta}
        filterKey={alert.filterKey}
      />

      <div>
        <h2 className="mb-2 flex items-center text-base font-normal">
          {alert.title}
        </h2>
        <div className="mb-2 text-sm text-justify break-all">
          {alert.description}
        </div>
      </div>
    </div>
  );
}

export default ListItem;