import { ScrollArea } from '@mantine/core';
import { FC } from 'react';
import { Group, Stack } from '../../components';
import { IconButton } from '../../components/IconButton';
import { Comment } from '../../types/job';
import { formatDate } from '../../utils';

type CommentProps = {
  comments: Comment[];
  onDeleteComment: (comment: Comment) => void;
};

export const CommentHistory: FC<CommentProps> = ({
  comments,
  onDeleteComment,
}) => {
  return (
    <div className="h-2/3 w-full bg-white">
      <Stack className="h-full gap-2">
        <p className="border-b border-gray-2 p-4 pb-2 font-medium">
          Comment History
        </p>
        <ScrollArea className="flex-1 p-4">
          <Stack className="gap-2">
            {comments.map((comment, index) => (
              <Group key={index} className="gap-2">
                <div className="h-6 w-6 flex items-center justify-center rounded bg-volcano-2 text-xs text-volcano-6">
                  {comment.user}
                </div>
                <Stack className="flex-1 gap-1">
                  <div className="text-sm">
                    <div className="whitespace-pre-wrap">{comment.content}</div>
                  </div>
                  <Group className="gap-4 text-xs text-gray-5">
                    <span>{formatDate(comment.time, 2)}</span>
                    <span>{`Page ${comment.page}`}</span>
                  </Group>
                </Stack>
                <IconButton
                  className="h-6 w-6 border border-red-3 bg-white text-xs text-red-5"
                  icon="i-ant-design-delete-outlined"
                  onClick={() => {
                    onDeleteComment(comment);
                  }}
                />
              </Group>
            ))}
          </Stack>
        </ScrollArea>
      </Stack>
    </div>
  );
};
