import { Row, Col, Typography, Space } from 'antd';
import type { ReactNode } from 'react';
import { useMobile } from '@/hooks/useMobile';

interface MobilePageHeaderProps {
  title: string;
  /** Optional element next to the title (badge, count, etc.) */
  extra?: ReactNode;
  /** Action buttons — will wrap on mobile, stay inline on desktop */
  actions?: ReactNode;
  style?: React.CSSProperties;
}

/**
 * Responsive page header that stacks title and actions on mobile.
 * On desktop: title left, actions right (single row).
 * On mobile: title full-width, actions below with wrapping.
 */
export function MobilePageHeader({ title, extra, actions, style }: MobilePageHeaderProps) {
  const { isMobile } = useMobile();

  return (
    <Row
      justify="space-between"
      align={isMobile ? 'top' : 'middle'}
      style={{ marginBottom: 16, ...style }}
      gutter={[0, isMobile ? 12 : 0]}
      wrap
    >
      <Col xs={24} md="auto">
        <Space>
          <Typography.Title level={4} style={{ margin: 0 }}>
            {title}
          </Typography.Title>
          {extra}
        </Space>
      </Col>
      {actions && (
        <Col xs={24} md="auto">
          <Space wrap size={isMobile ? 'small' : 'middle'}>
            {actions}
          </Space>
        </Col>
      )}
    </Row>
  );
}
