"use client"

import { UltiMailLogo } from "@/components/ultimail-logo"
import { MailSettingsSearchBar } from "@/components/gmail/settings/mail-settings-search-bar"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"

const SETTINGS_HREF = "/mail/settings"

export function MailSettingsHeader() {
  return (
    <header
      data-mail-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 pl-4 md:flex lg:w-72">
        <UltiMailLogo className="min-h-8 shrink-0" />
      </div>

      <div className="flex shrink-0 items-center pl-2 md:hidden">
        <UltiMailLogo variant="mark" className="h-8 w-8" />
      </div>

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

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