import type { ReactNode } from 'react';

export function PageHeader({ title, description, actions }: { title: ReactNode; description?: ReactNode; actions?: ReactNode }) {
  return (
    <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
        {description ? <p className="mt-1 max-w-2xl text-sm text-muted">{description}</p> : null}
      </div>
      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
    </div>
  );
}

export const btnPrimary = 'inline-flex h-9 items-center gap-1.5 rounded-md bg-accent px-3 text-[13px] font-medium text-accent-fg hover:opacity-90';
export const btnSecondary = 'inline-flex h-9 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-[13px] font-medium text-fg hover:bg-inset';
export const btnGhost = 'inline-flex h-8 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted hover:bg-inset hover:text-fg';
export const btnDanger = 'inline-flex h-8 items-center gap-1 rounded-md px-2 text-xs font-medium text-loss hover:bg-loss-bg';