"use client";

import { LogOut } from "lucide-react";
import { Badge } from "@/components/ui";
import AppSettingsControl from "@/components/settings/AppSettingsControl";
import { useLocale } from "@/lib/i18n";
import { tc } from "@/lib/i18n/common-labels";

interface DashboardHeaderProps {
  title: string;
  subtitle?: string;
  userPhone?: string;
  gisVerified?: boolean;
  onLogout: () => void;
}

export default function DashboardHeader({
  title,
  subtitle,
  userPhone,
  gisVerified,
  onLogout,
}: DashboardHeaderProps) {
  const { locale } = useLocale();

  return (
    <header
      data-testid="dashboard-header"
      className="sticky top-0 z-30 border-b border-border bg-surface/95 backdrop-blur supports-[backdrop-filter]:bg-surface/80"
    >
      <div className="flex min-h-16 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="truncate font-onest text-lg font-semibold tracking-tight text-ink sm:text-xl">
              {title}
            </h1>
            {gisVerified ? (
              <Badge variant="success" data-testid="dashboard-gis-verified">
                GIS Verified
              </Badge>
            ) : null}
          </div>
          {subtitle ? (
            <p className="mt-0.5 truncate font-inter text-sm text-muted">{subtitle}</p>
          ) : null}
        </div>

        <div className="flex shrink-0 items-center gap-2">
          {userPhone ? (
            <span className="hidden sm:block font-inter text-sm text-muted">{userPhone}</span>
          ) : null}
          <AppSettingsControl />
          <button
            type="button"
            onClick={onLogout}
            aria-label={tc("logout", locale)}
            data-testid="dashboard-logout"
            className="flex size-11 items-center justify-center rounded-lg text-muted transition-colors duration-200 hover:bg-surface-elevated hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2"
          >
            <LogOut className="size-4" aria-hidden="true" />
          </button>
        </div>
      </div>
    </header>
  );
}