import { DragOutlined } from '@ant-design/icons';
import { Tag } from 'antd';
import React, { memo } from 'react';
import type { TagItem } from '../types';
import './index.less';

interface DragOverlayTagProps {
  tag: TagItem;
}

const DragOverlayTag: React.FC<DragOverlayTagProps> = memo(({ tag }) => {
  return (
    <div className="drag-overlay-tag">
      <Tag className="overlay-tag">
        <div className="tag-content">
          <span className="drag-handle">
            <DragOutlined />
          </span>
          <span className="tag-label">
            {tag.label}
            <span className="sort-badge">{tag.sort}</span>
          </span>
        </div>
      </Tag>
    </div>
  );
});

DragOverlayTag.displayName = 'DragOverlayTag';
export default DragOverlayTag;
