import * as React from 'react';
import { clsx } from 'clsx';

export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
  align?: 'start' | 'between' | 'end';
}

const alignClass: Record<NonNullable<ToolbarProps['align']>, string> = {
  start: 'justify-start',
  between: 'justify-between',
  end: 'justify-end',
};

export function Toolbar({ align = 'start', className, ...props }: ToolbarProps) {
  return (
    <div
      className={clsx(
        'flex min-w-0 flex-wrap items-center gap-2 rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-2 shadow-sm shadow-black/[0.03]',
        alignClass[align],
        className
      )}
      {...props}
    />
  );
}
