import { View } from "@tarojs/components";
import style from  './index.module.less'
export interface IndexProps {
  buttons: JSX.Element[],
  children: JSX.Element|JSX.Element[]
}

const Index = ({children, buttons }: IndexProps) => {
  const buttonLen = buttons.length - 1
  return (
    <View className="rounded-12 bg-white">
      <View className="pt-12">
        <View className="px-16 pb-16">
          {children}
        </View>
      </View>
      <View className="border-top1-gray">
        <View className="flex items-center">
          {buttons.map((buttons,index)=> {
            return <View className={`${style.button} ${index < buttonLen ? style.gutterLine : ''}`}>{buttons}</View>
          })}
        </View>
      </View>
    </View>
  )
}

export default Index;