'use client';

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

interface AdminSectionHeaderProps {
  title: string;
  description?: string;
  actions?: React.ReactNode;
}

/**
 * AdminSectionHeader
 * 
 * Semantic header for sections within admin pages.
 * Follows "Precision Racing Minimal" theme: dense, clear hierarchy.
 */
export function AdminSectionHeader({
  title,
  description,
  actions
}: AdminSectionHeaderProps) {
  return (
    <Stack direction="row" align="center" justify="between" mb={4}>
      <Box>
        <Heading level={3} weight="bold" color="text-white">
          {title}
        </Heading>
        {description && (
          <Text size="xs" color="text-gray-500" block mt={0.5}>
            {description}
          </Text>
        )}
      </Box>
      {actions && (
        <Stack direction="row" align="center" gap={2}>
          {actions}
        </Stack>
      )}
    </Stack>
  );
}