import { Button } from "@xtablo/ui/components/button";
import { Link } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { getXtabloIcon } from "../utils/iconHelpers";

export function Header() {
  const logo = getXtabloIcon();
  return (
    <>
      <header className="sticky top-0 z-50 w-full border-b border-blue-200 dark:border-blue-900/30 bg-blue-100/90 dark:bg-slate-900/90 backdrop-blur-lg">
        <div className="container mx-auto px-4">
          <nav className="flex items-center justify-between h-16">
            <Link to="/" className="flex items-center gap-2">
              <img src={logo} alt="Logo XTablo" className="w-8 h-8" />
              <h1 className="text-2xl font-bold text-slate-900 dark:text-white">XTablo</h1>
            </Link>
            <div className="flex items-center gap-6">
              <div className="hidden md:flex items-center gap-6">
                <a
                  href="#features"
                  className={twMerge(
                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                    "transition-colors"
                  )}
                >
                  Fonctionnalités
                </a>
                <a
                  href="#pricing"
                  className={twMerge(
                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                    "transition-colors"
                  )}
                >
                  Tarifs
                </a>
                <a
                  href="#contact"
                  className={twMerge(
                    "text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
                    "transition-colors"
                  )}
                >
                  Contact
                </a>
              </div>
              <div className="flex items-center gap-4">
                <Link to="/login">
                  <Button
                    variant="outline"
                    className={twMerge(
                      "text-slate-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-400",
                      "border-blue-300 dark:border-blue-700/30 hover:border-blue-400 dark:hover:border-blue-600/50",
                      "transition"
                    )}
                  >
                    Connexion
                  </Button>
                </Link>
                <Link to="/signup">
                  <Button
                    className={twMerge(
                      "bg-blue-700 text-white hover:bg-blue-600",
                      "transition-colors"
                    )}
                  >
                    S&apos;inscrire
                  </Button>
                </Link>
              </div>
            </div>
          </nav>
        </div>
      </header>
    </>
  );
}
