import { getStateInfo } from "@/lib/getStateInfo";
import AText from "../icons/AText";
import BText from "../icons/BText";

async function TextHeader() {
  const { matchedCity } = await getStateInfo();

  return (
    <div className="z-[50]">
      {/* h1 صفحهٔ اصلی روی شعار می‌نشیند، نه روی خط برند: شعار هر شهر از city.json
          کیوردمحور و شهرمحور است («پزشک یاسوج، آنلاین کنار شماست») ولی «با نوبت 724»
          فقط برند است. تگ‌ها جابه‌جا شدند و کلاس‌ها عیناً حفظ — ظاهر تغییر نکرده. */}
      <p className="text-[#F17732] text-center text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
        با {matchedCity?.site_name}
      </p>
      <h1
        className="text-[#525252] text-center mt-2.5 text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] font-bold flex items-center gap-0.5 sm:gap-1 md:gap-2"
      >
        <div className="max-w-[18px] sm:max-w-[22px]">
          <BText />
        </div>
        {matchedCity?.slogan}
        <div className="max-w-[18px] sm:max-w-[22px]">
          <AText />
        </div>
      </h1>
    </div>
  );
}

export default TextHeader;