"use client";

import { Button } from "@/components/ui/button";
import { Menu, Search } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { ModeToggle } from "./mode-toggle";
import ToggleLanguage from "./toggle-language";

export default function Header() {
  return (
    <div className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10">
      <header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between relative">
        {/* Left Section */}
        <div className="flex gap-2">
          <Button variant="ghost" className="px-2 py-1">
            <Menu />
            منو
          </Button>
          <Button variant="ghost" className="px-2 py-1">
            <Search />
            جستجو
          </Button>
          <ModeToggle />
          <ToggleLanguage />
        </div>
        <Link
          href={"/"}
          className="absolute left-1/2 -translate-x-1/2 hidden sm:flex items-center"
        >
          <Image src={"/logo.png"} width={30} height={30} alt="logo" />
          <h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch">
            پارچ کست
          </h1>
        </Link>

        {/* Right Section */}
        <div className="flex gap-2">
          <Button variant="outline" className="px-2 py-1">
            ورود
          </Button>
          <Button className="px-2 py-1 bg-parch">مشترک شوید</Button>
        </div>
      </header>
    </div>
  );
}