"use client";

import { Search } from "lucide-react";
import { useTranslations } from "next-intl";

import { NewProjectMenu } from "@/components/dashboard/NewProjectMenu";

interface DashboardTopBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
}

export function DashboardTopBar({
  searchQuery,
  onSearchChange,
}: DashboardTopBarProps) {
  const t = useTranslations("auto.componentsDashboardDashboardTopBar");

  return (
    <header className="flex flex-col gap-4 border-b border-gray-100 bg-white px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
      <label className="relative max-w-md flex-1">
        <Search
          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400"
          aria-hidden
        />
        <input
          type="search"
          value={searchQuery}
          onChange={(event) => onSearchChange(event.target.value)}
          placeholder={t("searchPlaceholder")}
          className="w-full rounded-lg border border-gray-100 bg-neutral-50 py-2.5 pl-10 pr-4 text-sm text-neutral-900 placeholder:text-neutral-400 focus-visible:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
        />
      </label>

      <NewProjectMenu triggerClassName="shrink-0 gap-2" />
    </header>
  );
}
