import { Badge, Typography, theme } from 'antd';
import { CloseOutlined, MessageOutlined } from '@ant-design/icons';
import type { ChatWindow } from './ChatBarContext';

const { Text } = Typography;

interface MinimizedChatProps {
  window: ChatWindow;
  onExpand: () => void;
  onClose: () => void;
}

export default function MinimizedChat({ window: chatWindow, onExpand, onClose }: MinimizedChatProps) {
  const { token } = theme.useToken();

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        padding: '8px 12px',
        background: token.colorBgElevated,
        borderRadius: '12px 12px 0 0',
        border: `1px solid ${token.colorBorder}`,
        borderBottom: 'none',
        cursor: 'pointer',
        minWidth: 180,
        maxWidth: 240,
      }}
      onClick={onExpand}
    >
      <Badge count={chatWindow.unreadCount} size="small" offset={[-2, 2]}>
        <MessageOutlined style={{ fontSize: 16, color: token.colorPrimary }} />
      </Badge>
      <Text
        ellipsis
        style={{
          flex: 1,
          fontSize: 13,
          fontWeight: chatWindow.unreadCount > 0 ? 600 : 400,
        }}
      >
        {chatWindow.videoTitle}
      </Text>
      <CloseOutlined
        style={{ fontSize: 12, color: token.colorTextSecondary }}
        onClick={(e) => {
          e.stopPropagation();
          onClose();
        }}
      />
    </div>
  );
}
