import { Phone } from "lucide-react";
import { useTranslations } from "next-intl";
import Image from "next/image";

export function Line() {
  const t = useTranslations();
  return (
    <div className="bg-black py-10 px-4">
      <div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
        <div className="text-white flex flex-col items-start justify-start gap-5 ">
          <h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
            {t("home.contactLine.text")}
          </h2>
          <p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
            <span
              className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
                  shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
            >
              <Phone className="text-white w-5 h-5" />
            </span>
            +123-456-7890
          </p>
        </div>
        <Image
          src="/images/home/fireHydrant.png"
          alt="image"
          width={60}
          height={60}
          priority
          className=" sm:flex hidden object-contain w-80 h-80 absolute -bottom-25 right-0"
        />
      </div>
    </div>
  );
}