Neon-Desk/components/financials/control-bar.tsx

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type ControlButtonVariant = "primary" | "ghost" | "secondary" | "danger";

export type FinancialControlOption = {
  value: string;
  label: string;
  disabled?: boolean;
};

export type FinancialControlSection = {
  id: string;
  label: string;
  value: string;
  options: FinancialControlOption[];
  onChange: (value: string) => void;
};

export type FinancialControlAction = {
  id: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: ControlButtonVariant;
};

type FinancialControlBarProps = {
  title?: string;
  subtitle?: string;
  sections: FinancialControlSection[];
  actions?: FinancialControlAction[];
  className?: string;
};

export function FinancialControlBar({
  title = "Control Bar",
  subtitle,
  sections,
  actions,
  className,
}: FinancialControlBarProps) {
  return (
    <section
      className={cn("border-t border-[color:var(--line-weak)] pt-4", className)}
    >
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">
            {title}
          </h3>
          {subtitle ? (
            <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">
              {subtitle}
            </p>
          ) : null}
        </div>

        {actions && actions.length > 0 ? (
          <div className="grid w-full grid-cols-1 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:justify-end">
            {actions.map((action) => (
              <Button
                key={action.id}
                type="button"
                variant={action.variant ?? "secondary"}
                disabled={action.disabled}
                className="px-2 py-1 text-xs sm:min-h-9"
                onClick={action.onClick}
              >
                {action.label}
              </Button>
            ))}
          </div>
        ) : null}
      </div>

      <div className="mt-4 grid grid-cols-1 gap-3">
        {sections.map((section) => (
          <div key={section.id} className="data-surface px-3 py-3">
            <span className="mb-2 block text-[11px] text-[color:var(--terminal-muted)]">
              {section.label}
            </span>
            <div className="flex flex-wrap items-center gap-1.5">
              {section.options.map((option) => (
                <Button
                  key={`${section.id}-${option.value}`}
                  type="button"
                  variant={option.value === section.value ? "primary" : "ghost"}
                  disabled={option.disabled}
                  className="px-2 py-1 text-xs sm:min-h-9"
                  onClick={() => section.onChange(option.value)}
                >
                  {option.label}
                </Button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}