import React from 'react';

// 标题栏组件接口
interface HeaderBarProps {
  className?: string;
  title?: string;
}

// 顶部标题栏组件
const HeaderBar: React.FC<HeaderBarProps> = ({
  className = "",
  title = ""
}) => {
  return (
    <div className={`absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px] ${className}`}>
      <div className="absolute bottom-[18.95%] left-0 right-0 top-0">
        <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
          <img
            alt="标题栏背景"
            className="block max-w-none size-full"
            src="/supply-chain/img8.svg"
          />
        </div>
      </div>
      <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]">
        <div className="absolute inset-[-257.75%_-17.4%]">
          <img
            alt="标题栏装饰"
            className="block max-w-none size-full"
            src="/supply-chain/group1158.svg"
          />
        </div>
      </div>

      {/* 标题文本 */}
      {title && (
        <div className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-[20px] translate-x-[-50%] translate-y-[-50%]">
          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white tracking-[10.2px] whitespace-nowrap">
            <p className="leading-[32px]">{title}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default HeaderBar;