"use client";
import { Button } from "@/components/ui/button";
import Logo from "./Logo";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { useLocale } from "use-intl";
import { useTranslations } from "next-intl";
import { useVendor } from "@/context/VendorContext";
import LanguageSwitcher from "./LanguageSwitcher";

export default function Header() {
  const locale = useLocale();
  const t = useTranslations("Header");
  const { vendor } = useVendor();

  const handleBackToWebsite = () => {
    if (vendor?.website) {
      window.open(vendor.website, "_blank", "noopener,noreferrer");
    }
  };

  return (
    <header className="flex justify-between items-center bg-vendor-primary text-white py-6 px-5 md:px-10 lg:px-20">
      <Logo />
      <div className="flex items-center gap-4">
        <LanguageSwitcher />
        {vendor?.website && (
          <Button
            variant="duoColor"
            duoColorColor="#fff"
            className="text-[14px] sm:text-[16px] md:text-[18px] p-2 sm:px-4 sm:py-2.5 md:px-5.5 md:py-3 font-normal flex items-center gap-2"
            duoColorHoverTextColor="var(--color-vendor-primary)"
            onClick={handleBackToWebsite}
          >
            {locale === "ar" ? (
              <IoIosArrowForward className="w-4 h-4" />
            ) : (
              <IoIosArrowBack className="w-4 h-4" />
            )}
            {t("backToWebsite")}
          </Button>
        )}
      </div>
    </header>
  );
}