'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';

interface AdminToolbarProps {
  children: React.ReactNode;
  leftContent?: React.ReactNode;
}

/**
 * AdminToolbar
 * 
 * Semantic toolbar for admin pages.
 * Used for filters, search, and secondary actions.
 */
export function AdminToolbar({
  children,
  leftContent
}: AdminToolbarProps) {
  return (
    <Card p={3} bg="bg-charcoal/50" borderColor="border-charcoal-outline">
      <Stack direction="row" align="center" justify="between" gap={4} wrap>
        {leftContent && (
          <Box flexGrow={1}>
            {leftContent}
          </Box>
        )}
        <Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
          {children}
        </Stack>
      </Stack>
    </Card>
  );
}