'use client';

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

interface AdminDangerZonePanelProps {
  title: string;
  description: string;
  children: React.ReactNode;
}

/**
 * AdminDangerZonePanel
 * 
 * Semantic panel for destructive or dangerous admin actions.
 * Restrained but clear warning styling.
 */
export function AdminDangerZonePanel({
  title,
  description,
  children
}: AdminDangerZonePanelProps) {
  return (
    <Card borderColor="border-error-red/30" bg="bg-error-red/5">
      <Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={6}>
        <Box>
          <Heading level={4} weight="bold" color="text-error-red">
            {title}
          </Heading>
          <Text size="sm" color="text-gray-400" block mt={1}>
            {description}
          </Text>
        </Box>
        <Box>
          {children}
        </Box>
      </Stack>
    </Card>
  );
}