'use client';

import { cn } from '@djangocfg/ui-core/lib';

import { ComposerButton } from './ComposerButton';
import type { ActionBarProps } from './types';

const GAP: Record<ActionBarProps['size'], string> = {
  sm: 'gap-0.5',
  md: 'gap-1',
  lg: 'gap-1.5',
};

/**
 * Renders the `blockEnd` action bar — `actionsStart` left, `actionsEnd`
 * right, `justify-between`. Wrapped in `role="toolbar"` only when it
 * actually carries interactive controls.
 *
 * `cluster` renders just one side — used by the `inline` layout, which
 * places the start cluster before the textarea and the end cluster after.
 */
export function ComposerActionBar({
  actionsStart,
  actionsEnd,
  size,
  inlineStart,
  inlineEnd,
  className,
  cluster,
}: ActionBarProps & { className?: string; cluster?: 'start' | 'end' }) {
  const hasInteractive = actionsStart.length > 0 || actionsEnd.length > 0;
  const gap = GAP[size];

  const startCluster = (
    <div className={cn('flex items-center', gap)}>
      {inlineStart}
      {actionsStart.map((action) => (
        <ComposerButton key={action.id} action={action} size={size} />
      ))}
    </div>
  );
  const endCluster = (
    <div className={cn('flex items-center', gap)}>
      {inlineEnd}
      {actionsEnd.map((action) => (
        <ComposerButton key={action.id} action={action} size={size} />
      ))}
    </div>
  );

  // Single-cluster mode — no toolbar wrapper, the caller owns layout.
  if (cluster === 'start') return startCluster;
  if (cluster === 'end') return endCluster;

  return (
    <div
      role={hasInteractive ? 'toolbar' : undefined}
      aria-label={hasInteractive ? 'Composer actions' : undefined}
      className={cn('flex w-full items-center justify-between', className)}
    >
      {startCluster}
      {endCluster}
    </div>
  );
}