"use client"

import Image from "next/image"
import Link from "next/link"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
import {
  SUITE_APP_LOGO_LOCKUP_CLASS,
  SUITE_APP_LOGO_MARK_CLASS,
  SUITE_APP_LOGO_TEXT_CLASS,
} from "@/lib/suite/suite-chrome-classes"
import { cn } from "@/lib/utils"

import { ACCOUNT_SETTINGS_BASE_PATH } from "@/lib/compte-settings/settings-nav"

const ACCOUNT_HREF = ACCOUNT_SETTINGS_BASE_PATH

export function CompteSettingsHeader() {
  return (
    <header
      data-compte-settings-chrome-header
      className="flex h-16 w-full shrink-0 items-center gap-0 bg-app-canvas pr-4 sm:gap-2"
    >
      <div className="hidden h-full w-64 shrink-0 items-center gap-2 pl-4 md:flex lg:w-72">
        <Link href={ACCOUNT_HREF} className={cn("inline-flex", SUITE_APP_LOGO_LOCKUP_CLASS)}>
          <Image
            src={suitePublicAsset("/compte-mark.svg")}
            alt=""
            width={32}
            height={32}
            className={SUITE_APP_LOGO_MARK_CLASS}
            priority
          />
          <span className={SUITE_APP_LOGO_TEXT_CLASS}>Compte Ulti</span>
        </Link>
      </div>

      <div className="flex shrink-0 items-center pl-2 md:hidden">
        <Link href={ACCOUNT_HREF} className="inline-flex shrink-0 items-center">
          <Image
            src={suitePublicAsset("/compte-mark.svg")}
            alt="Compte Ulti"
            width={32}
            height={32}
            className={SUITE_APP_LOGO_MARK_CLASS}
            priority
          />
        </Link>
      </div>

      <div className="flex min-w-0 flex-1 items-center px-1 sm:pl-1 sm:pr-1" />

      <HeaderAccountActions
        className="ml-auto shrink-0 pl-2 sm:pl-4"
        settingsHref={ACCOUNT_HREF}
      />
    </header>
  )
}