import { type Component } from "solid-js";
import type { TrackerViewMode } from "./types";

export interface TabBarProps {
  mode: () => TrackerViewMode;
  onModeChange: (mode: TrackerViewMode) => void;
}

export const TabBar: Component<TabBarProps> = (props) => {
  return (
    <div class="flex border-b border-gray-300 bg-gray-50">
      <button
        class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
          props.mode() === "history"
            ? "bg-white text-blue-600 border-b-2 border-blue-600"
            : "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
        }`}
        onClick={() => props.onModeChange("history")}
      >
        📜 历史
      </button>
      <button
        class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
          props.mode() === "tracker"
            ? "bg-white text-blue-600 border-b-2 border-blue-600"
            : "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
        }`}
        onClick={() => props.onModeChange("tracker")}
      >
        📋 追踪
      </button>
    </div>
  );
};