import React, { useRef, useState } from "react";

interface CollapsibleContentProps {
	content: string;
	maxHeight?: number;
}

const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
	content,
	maxHeight = 150,
}) => {
	const contentWrapperRef = useRef<HTMLDivElement>(null);
	const [isExpanded, setIsExpanded] = useState(false);

	// Determine if content needs to be collapsed
	const shouldCollapse = contentWrapperRef.current
		? contentWrapperRef.current.scrollHeight > maxHeight
		: false;

	return (
		<div>
			<div
				ref={contentWrapperRef}
				className={`duration-300 ${
					shouldCollapse && !isExpanded
						? `max-h-[${maxHeight}px] overflow-hidden relative`
						: ""
				}`}>
				<div
					className="ql-editor p-0 space-y-1 leading-relaxed"
					dangerouslySetInnerHTML={{
						__html: content || "",
					}}
				/>

				{/* Gradient overlay */}
				{shouldCollapse && !isExpanded && (
					<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
				)}
			</div>

			{/* Expand/Collapse button */}
			{shouldCollapse && (
				<button
					onClick={() => setIsExpanded(!isExpanded)}
					className="mt-2 text-blue-500 hover:text-blue-700">
					{isExpanded ? "收起" : "展开"}
				</button>
			)}
		</div>
	);
};

export default CollapsibleContent;