import type { ReactNode } from 'react';
import { Box, Group, Stack, Text, Title } from '@mantine/core';

import { FreightVisual, type FreightVisualVariant } from './FreightVisual';

interface WarehouseHeroProps {
  title: string;
  subtitle?: string;
  /** Primary illustration shown on the right of the hero. */
  variant?: FreightVisualVariant;
  /** Optional secondary illustration tucked behind the primary. */
  secondaryVariant?: FreightVisualVariant;
  actions?: ReactNode;
}

/**
 * Page header hero with a lightweight freight illustration. Low-contrast,
 * minimal — sets context without overpowering the data below.
 */
export function WarehouseHero({
  title,
  subtitle,
  variant = 'warehouse',
  secondaryVariant,
  actions,
}: WarehouseHeroProps) {
  return (
    <Box
      style={{
        background: 'linear-gradient(135deg, #F8F9FA 0%, #F1F3F5 100%)',
        border: '1px solid #E9ECEF',
        borderRadius: 'var(--mantine-radius-md)',
        padding: 'var(--mantine-spacing-lg)',
        overflow: 'hidden',
      }}
    >
      <Group justify="space-between" wrap="nowrap" align="center">
        <Stack gap={4}>
          <Title order={3}>{title}</Title>
          {subtitle && (
            <Text size="sm" c="dimmed">
              {subtitle}
            </Text>
          )}
          {actions && <Group mt="sm">{actions}</Group>}
        </Stack>

        <Group gap="xs" wrap="nowrap" style={{ opacity: 0.95 }}>
          {secondaryVariant && (
            <FreightVisual variant={secondaryVariant} size={56} style={{ opacity: 0.7 }} />
          )}
          <FreightVisual variant={variant} size={84} />
        </Group>
      </Group>
    </Box>
  );
}
