"use client";

import { useState } from "react";
import Image from "next/image";
import DropdownButton from "@/components/ui/DropdownButton";

const languages = ["English", "Sinhala", "Tamil"];
const currencies = ["LKR", "USD", "EUR", "GBP", "AED"];

const GlobeIcon = (
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8} className="w-4 h-4">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" />
    <path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3c-2.4 2.6-3.8 5.7-3.8 9s1.4 6.4 3.8 9M12 3c2.4 2.6 3.8 5.7 3.8 9s-1.4 6.4-3.8 9" />
  </svg>
);

const CurrencyIcon = (
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8} className="w-4 h-4">
    <path strokeLinecap="round" strokeLinejoin="round" d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3M9 7h6V3H9v4zM9 7l6 6" />
  </svg>
);

export default function Topbar() {
  const [search, setSearch] = useState("");
  const [language, setLanguage] = useState("English");
  const [currency, setCurrency] = useState("LKR");

  return (
    <header className="w-full bg-white border-b border-gray-100 px-4 pl-14 py-3 sm:px-6 lg:px-20 lg:py-0 lg:h-16 flex flex-wrap items-center gap-3 sm:gap-4 lg:gap-6 overflow-visible margin-bottom-20">
      {/* Logo */}
      <div className="shrink-0">
        <Image src="/images/Diriya-logo.png" alt="Diriya" width={120} height={36} className="w-[96px] sm:w-[112px] lg:w-[120px] h-auto" priority />
      </div>

      {/* Search */}
      <div className="order-3 w-full lg:order-none lg:flex-1 lg:max-w-xl lg:mx-auto">
        <div className="flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2.5">
          <svg className="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
          </svg>
          <div className="w-px h-4 bg-gray-300" />
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search by products or stores"
            className="flex-1 bg-transparent text-sm text-gray-700 placeholder-gray-400 outline-none"
          />
        </div>
      </div>

      {/* Right controls */}
      <div className="ml-auto flex shrink-0 items-center gap-2 sm:gap-3">
        <DropdownButton
          options={languages}
          selected={language}
          onSelect={setLanguage}
          icon={GlobeIcon}
        />

        <DropdownButton
          options={currencies}
          selected={currency}
          onSelect={setCurrency}
          icon={CurrencyIcon}
        />

        {/* Avatar */}
        <div className="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center text-[12px] font-semibold text-gray-500 tracking-wide cursor-pointer hover:bg-gray-300 transition-colors">
          AN
        </div>
      </div>
    </header>
  );
}
