"use client";

import { useState } from "react";
import {
  DashboardMenuButton,
  DashboardMenuDrawer,
} from "@/features/panel/components/dashboard-menu-drawer";
import Link from "next/link";
import { ProfileAvatar } from "@/features/profile/components/profile-avatar";
import { useProfile } from "@/features/profile/hooks/use-profile";
import { DashboardGemBalance } from "@/features/panel/components/dashboard-gem-balance";
import { DashboardNotificationsButton } from "@/features/panel/components/dashboard-notifications-button";
import { panelDict } from "../dict";

export function DashboardHeader() {
  const [menuOpen, setMenuOpen] = useState(false);
  const { data: profile } = useProfile();
  return (
    <>
      <header className="flex flex-row-reverse items-center gap-3 px-1">
        <div className="flex gap-2">
          <DashboardGemBalance />
          <DashboardNotificationsButton />
          <Link
            href="/panel/profile"
            aria-label={panelDict.profile}
            className="relative inline-flex items-center justify-center transition-transform hover:scale-105"
          >
            <ProfileAvatar subscription={profile?.subscription} size="sm" />
          </Link>
        </div>
        <p className="w-[40%]"></p>

        <DashboardMenuButton onClick={() => setMenuOpen(true)} />
      </header>

      <DashboardMenuDrawer open={menuOpen} onClose={() => setMenuOpen(false)} />
    </>
  );
}