interface ExperimentTitleProps {
  title: string;
  description: string;
}

export default function ExperimentTitle({
  title,
  description,
}: ExperimentTitleProps) {
  return (
    <>
      {/* 标题 */}
      <div className="w-full relative pb-20">
        {/* 主标题容器 */}
        <div className="flex items-start gap-6">
          {/* 主标题 */}
          <div className="bg-white border-4 border-blue-500 rounded-2xl px-10 py-3 shadow-md">
            <h1 className="text-3xl font-bold text-blue-400 italic tracking-wide">
              {title}
            </h1>
          </div>

          {/* 副标题 */}
          <div className="flex-1 relative pt-6">
            <p className="text-gray-600 text-3xl relative z-10">
              {description}
            </p>
          </div>
        </div>

        {/* 使用 SVG 绘制更精确的装饰线 */}
        <svg
          className="absolute top-14 w-full h-20"
          viewBox="0 0 1400 60"
          preserveAspectRatio="none"
        >
          {/* 左侧水平线 */}
          <line
            x1="10"
            y1="30"
            x2="150"
            y2="30"
            stroke="#3b82f6"
            strokeWidth="3"
            strokeLinecap="round"
          />
          {/* 斜线（从左到右，向下倾斜）*/}
          <line
            x1="150"
            y1="30"
            x2="200"
            y2="60"
            stroke="#3b82f6"
            strokeWidth="3"
            strokeLinecap="round"
          />
          {/* 右侧水平线（与左侧在同一高度）*/}
          <line
            x1="250"
            y1="30"
            x2="1800"
            y2="30"
            stroke="#3b82f6"
            strokeWidth="3"
            strokeLinecap="round"
          />
        </svg>
      </div>
    </>
  );
}