"use client";

import type { EntryTab } from "@/features/entries/components/entries-panel.types";
import ToggleButtonGroup from "@/shared/components/forms/toggle-button-group";

type EntriesPanelHeaderProps = {
    entryTab: EntryTab;
    activeGroupId: number | null;
    activeFilterCount: number;
    onTabChange: (tab: EntryTab) => void;
    onOpenFilters: () => void;
    onOpenCreate: () => void;
};

export default function EntriesPanelHeader({
    entryTab,
    activeGroupId,
    activeFilterCount,
    onTabChange,
    onOpenFilters,
    onOpenCreate
}: EntriesPanelHeaderProps) {
    return (
        <div className="card-header">
            <ToggleButtonGroup
                value={entryTab}
                onChange={onTabChange}
                ariaLabel="Entries and schedules tab"
                sizeClassName="px-3 py-2 text-xs font-semibold"
                options={[
                    { value: "ENTRIES", label: "Entries", className: "mr-[-10px] w-24" },
                    { value: "SCHEDULES", label: "Schedules", className: "w-24" }
                ]}
            />
            <div className="flex items-center gap-2">
                <button
                    type="button"
                    onClick={onOpenFilters}
                    className="rounded-lg btn-outline-accent px-3 py-1 text-xs font-semibold disabled:opacity-50"
                    disabled={!activeGroupId}
                >
                    Filters{activeFilterCount ? ` (${activeFilterCount})` : ""}
                </button>
                <button
                    type="button"
                    onClick={onOpenCreate}
                    className="flex h-8 w-8 -translate-y-0.5 items-center justify-center rounded-full border border-accent bg-panel text-lg font-semibold leading-none hover:border-accent-strong disabled:opacity-50"
                    disabled={!activeGroupId}
                    aria-label={entryTab === "ENTRIES" ? "Add entry" : "Add schedule"}
                >
                    +
                </button>
            </div>
        </div>
    );
}