import 'dayjs/locale/ru'; // load on demand

import _ from 'lodash';
import { MdClose } from 'react-icons/md';

import { ShmChannelMessageType } from '../../../api/types';
import FileTypeIcon from './FileTypeIcon';

const MessagePinnedItem = ({ msg, onClick, onPin }: {
    msg: ShmChannelMessageType
    onClick: () => void;
    onPin: () => void;
}) => {



    return (
        <div




            className='mb-2 mt-2 border-l-2 w-full border-gray-500 pl-2  flex justify-between items-center'>

            <div
                className='active:opacity-50 cursor-pointer'
                onClick={(e) => {
                    e.stopPropagation();
                    // e.preventDefault();

                    onClick();
                }}

                id={`pin-msg-${msg._id}`}>


                <div>{msg.text}</div>


                {msg.voice?.url && <div
                    className='text-sm text-gray-500'
                >Аудио сообщение</div>}

                {msg.attachments?.map((attachment) => {

                    return <div

                        className="cursor-pointer active:opacity-50 flex items-center space-x-2"
                    >


                        <FileTypeIcon doc={attachment} />

                        <div>{attachment.name}</div>

                    </div>

                })}



            </div>



            <div className='cursor-pointer active:opacity-50 p-2' onClick={(e) => {
                e.stopPropagation();
                // e.preventDefault();
                onPin();
            }}>
                <MdClose />
            </div>



        </div>

    );
};

export default MessagePinnedItem;
