'use client';

import React from 'react';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { ProgressLine } from '@/components/shared/ux/ProgressLine';

interface AdminHeaderPanelProps {
  title: string;
  description?: string;
  actions?: React.ReactNode;
  isLoading?: boolean;
}

/**
 * AdminHeaderPanel
 * 
 * Semantic header for admin pages.
 * Includes title, description, actions, and a progress line for loading states.
 */
export function AdminHeaderPanel({
  title,
  description,
  actions,
  isLoading = false
}: AdminHeaderPanelProps) {
  return (
    <Box position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
      <Stack direction="row" align="center" justify="between">
        <Box>
          <Heading level={1} weight="bold" color="text-white">
            {title}
          </Heading>
          {description && (
            <Text size="sm" color="text-gray-400" block mt={1}>
              {description}
            </Text>
          )}
        </Box>
        {actions && (
          <Stack direction="row" align="center" gap={3}>
            {actions}
          </Stack>
        )}
      </Stack>
      <Box position="absolute" bottom="0" left="0" w="full">
        <ProgressLine isLoading={isLoading} />
      </Box>
    </Box>
  );
}