import 'dayjs/locale/ru';

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

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

const MessagePinnedItem = ({
  msg,
  onClick,
  onPin,
}: {
  msg: ShmChannelMessageType;
  onClick: () => void;
  onPin: () => void;
}) => {
  const preview =
    msg.text ||
    (msg.voice?.url ? '🎙 Голосовое сообщение' : msg.attachments?.[0]?.name || '📎 Файл');

  return (
    <div
      className="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-[var(--tg-divider)] bg-[var(--tg-bg)]"
    >
      <div
        id={`pin-msg-${msg._id}`}
        onClick={(e) => {
          e.stopPropagation();
          onClick();
        }}
        className="flex-1 min-w-0 flex items-center gap-2 pl-2 relative cursor-pointer active:opacity-70"
      >
        <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-full bg-[var(--tg-accent)]" />
        <div className="flex-1 min-w-0">
          <div className="text-[12px] font-semibold text-[var(--tg-accent)]">
            Закреплённое сообщение
          </div>
          <div className="flex items-center gap-1.5 text-[13px] text-[var(--tg-text-primary)] truncate">
            {msg.attachments?.[0] && (
              <div className="shrink-0 w-3.5 h-3.5">
                <FileTypeIcon size={14} doc={msg.attachments[0]} />
              </div>
            )}
            <span className="truncate">{preview}</span>
          </div>
        </div>
      </div>

      <IconButton
        size="sm"
        onClick={(e) => {
          e.stopPropagation();
          onPin();
        }}
      >
        <MdClose />
      </IconButton>
    </div>
  );
};

export default MessagePinnedItem;
