"use client";

import { ICONS } from "@/lib/icons";

export type Mode = "CONSOLIDATED" | "PERSONAL" | "BUSINESS";

const MODES: { key: Mode; label: string; icon: typeof ICONS.tongQuan }[] = [
  { key: "CONSOLIDATED", label: "Tổng quan", icon: ICONS.tongQuan },
  { key: "PERSONAL", label: "Cá nhân", icon: ICONS.caNhan },
  { key: "BUSINESS", label: "Doanh nghiệp", icon: ICONS.doanhNghiep },
];

export function TopBar({
  mode,
  onModeChange,
  period,
  onPeriodChange,
  title,
  subtitle,
}: {
  mode: Mode;
  onModeChange: (m: Mode) => void;
  period: string;
  onPeriodChange: (p: string) => void;
  title: string;
  subtitle: string;
}) {
  return (
    <div className="border-b border-slate-100 bg-white px-8 py-5">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-extrabold text-slate-800">{title}</h1>
          <p className="text-sm text-slate-400">{subtitle}</p>
        </div>
        <input
          type="month"
          value={period}
          onChange={(e) => onPeriodChange(e.target.value)}
          className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-600"
        />
      </div>
      <div className="mt-4 inline-flex rounded-xl bg-slate-100 p-1">
        {MODES.map((m) => {
          const Icon = m.icon;
          return (
            <button
              key={m.key}
              onClick={() => onModeChange(m.key)}
              className={`flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-semibold transition ${
                mode === m.key ? "bg-teal-500 text-white shadow-sm" : "text-slate-500 hover:text-slate-700"
              }`}
            >
              <Icon size={16} strokeWidth={1.75} className={mode === m.key ? "text-white" : "text-slate-400"} />
              {m.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}