import { memo } from 'react'
import { Tooltip } from 'antd'
import { CommentOutlined } from '@ant-design/icons'

import { UserView } from '@components/views'
import { formatDate } from '@utils'

export const MarksCard = memo(({ title, marks, className, ...other }) => (
    <div className={`panel ${className ?? ''}`} {...other}>
        <span className={'panel_title'}>{title}</span>
        <div className={'panel_content'}>
            {marks?.map(({ dateCreated, comment, user }, i) => (
                <div key={`${i}`}>
                    <UserView user={user} />
                    <span>{formatDate(dateCreated)}</span>
                    <Tooltip title={comment}>
                        <CommentOutlined />
                    </Tooltip>
                </div>
            ))}
        </div>
    </div>
))

export default MarksCard