import { DeleteOutlined } from "@ant-design/icons";
import { Button, Flex, Popconfirm, Typography } from "antd";

import type { Conversation } from "../../../../shared/api";

interface ConversationCardProps {
  conversation: Conversation;
  onDelete: () => void;
  onSelect: () => void;
  selected: boolean;
}

export function ConversationCard({ conversation, onDelete, onSelect, selected }: ConversationCardProps) {
  const className = selected ? "app-sidebar-list-item app-sidebar-list-item--selected" : "app-sidebar-list-item";

  return (
    <Flex align="center" className={className} gap="small" justify="space-between" onClick={onSelect}>
      <Typography.Text ellipsis style={{ flex: 1, minWidth: 0 }}>
        {conversation.title}
      </Typography.Text>
      <span className="app-sidebar-item-actions">
        <Popconfirm
          description="删除后不可恢复"
          okButtonProps={{ danger: true }}
          okText="删除"
          onCancel={(e) => e?.stopPropagation()}
          onConfirm={(e) => {
            e?.stopPropagation();
            onDelete();
          }}
          title="确认删除该对话？"
        >
          <Button
            aria-label="删除"
            danger
            icon={<DeleteOutlined />}
            onClick={(e) => e.stopPropagation()}
            size="small"
            type="text"
          />
        </Popconfirm>
      </span>
    </Flex>
  );
}