import React from 'react';
import { View, ScrollView } from '@tarojs/components';
import { ReactNode, useMemo } from 'react';
import './index.scss';

interface PageShellProps {
  padding?: 'none' | 'sm' | 'md' | 'lg';
  safeBottom?: boolean;
  scroll?: boolean;
  className?: string;
  children: ReactNode;
}

const PADDING_MAP = {
  none: '0',
  sm: '16px',
  md: 'var(--tk-page-padding)',
  lg: '32px',
} as const;

const PageShell: React.FC<PageShellProps> = ({
  padding = 'md',
  safeBottom = true,
  scroll = true,
  className,
  children,
}) => {
  const style = useMemo(() => ({
    paddingLeft: PADDING_MAP[padding],
    paddingRight: PADDING_MAP[padding],
    paddingTop: PADDING_MAP[padding],
  }), [padding]);

  const cls = [
    'page-shell',
    safeBottom && 'page-shell--safe-bottom',
    className,
  ].filter(Boolean).join(' ');

  if (scroll) {
    return (
      <ScrollView scrollY className={cls} style={style}>
        {children}
      </ScrollView>
    );
  }

  return (
    <View className={cls} style={style}>
      {children}
    </View>
  );
};

export default React.memo(PageShell);