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

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

  return (
    <div className="z-[50]">
      <h1 className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
        با {matchedCity?.site_name}
      </h1>
      <h2
        className="text-[#525252] text-center mt-2.5 font-kalame 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>
      </h2>
    </div>
  );
}

export default TextHeader;