import { PlayCircleOutlined, CloseOutlined } from '@ant-design/icons';
import React, { useRef } from 'react';
import Draggable from 'react-draggable';
import clsx from 'clsx';

interface Props {
	children: React.ReactNode;
	defaultPosition?: { x: number; y: number };
	// 新增
	title: string;
	onClose: () => void;
}

const DraggableBox: React.FC<Props> = ({
	children,
	defaultPosition = { x: 0, y: 0 },
	title,
	onClose,
}) => {
	const nodeRef = useRef<HTMLDivElement | null>(null);

	return (
		<Draggable
			nodeRef={nodeRef}
			defaultPosition={defaultPosition}
			handle=".drag-header" // 仅标题栏可拖拽，内容区不触发拖拽
		>
			<div
				ref={nodeRef}
				className={clsx(
					'fixed select-none z-[9999] bg-white shadow-xl rounded-lg overflow-hidden',
					'border-[8px] border-slate-200 top-[8px] right-[8px] w-[800px] h-[580px] ' // 整体8px外边框
				)}
			>
				{/* 拖拽标题栏 + 关闭按钮 */}
				<div className="drag-header flex items-center justify-between px-4 py-3 bg-slate-100 cursor-move border-b border-slate-200">
					<div className="flex items-center gap-2">
						<PlayCircleOutlined className="text-slate-600" />
						<span className="font-semibold text-slate-800">{title}</span>
					</div>
					{/* 关闭按钮，阻止拖拽冒泡 */}
					<div
						onClick={(e) => {
							e.stopPropagation();
							onClose();
						}}
						className="w-6 h-6 flex items-center justify-center rounded hover:bg-red-100 cursor-pointer transition-colors"
					>
						<CloseOutlined className="text-slate-500 hover:text-red-500" />
					</div>
				</div>

				{/* 传入的视频内容 */}
				<div style={{ height: 'calc(100% - 50px)', width: '100%' }}>
					{children}</div>
			</div>
		</Draggable>
	);
};

export default DraggableBox;