import { ReactNode } from 'react';
import { PageContainer as ProPageContainer } from '@ant-design/pro-components';
import { Typography } from 'antd';
import { GRAY } from '@/theme/tokens';

const { Text } = Typography;

interface Props {
  title: string;
  description?: string;
  extra?: ReactNode;
  children: ReactNode;
}

/**
 * 모든 페이지 공통 래퍼.
 * - 타이틀 + 설명 + 우측 액션 버튼 슬롯
 * - breadcrumb 자동 표시 (ProPageContainer 기본)
 * - 배경 / 간격 일관성
 */
export default function PageContainer({ title, description, extra, children }: Props) {
  return (
    <ProPageContainer
      header={{
        title: (
          <span style={{ fontSize: 24, fontWeight: 700, color: GRAY[800], letterSpacing: -0.5 }}>
            {title}
          </span>
        ),
        breadcrumb: {},
        ghost: true,
        extra,
        style: {
          paddingBottom: description ? 8 : 0,
        },
      }}
      content={
        description ? (
          <Text style={{ fontSize: 14, color: GRAY[500] }}>{description}</Text>
        ) : undefined
      }
      style={{ minHeight: 'calc(100vh - 56px)' }}
    >
      {children}
    </ProPageContainer>
  );
}
