import React, { useState } from "react";
import { View } from "@tarojs/components";

import style from "./index.module.less";

interface Props {
  current: string;
  className?: string
  onTabIndexChange: (index:string) => void
  list: {
    key: string;
    label: string | React.ReactChild;
    children?: React.ReactChild | React.ReactChild[];
  }[];
}

export default function Index({
  current,
  list,
  onTabIndexChange,
}: Props) {
  const setTabIndex = (index: string)=> {
    onTabIndexChange(index)
  }
  return (
    <View className="bg-white w-full rounded-12">
      <View className={`flex items-center p-4 ${style.buttonTabs}`}>
        {list.map((item) => {
          return (
            <View
              key={item.key}
              className={`${style.buttonTab}  ${
                current === item.key ? style.buttonTabActived : ""
              }
                  flex-1 shrink-0
                `}
              onClick={() => setTabIndex(item.key)}
            >
              {item.label}
            </View>
          );
        })}
      </View>
      {/* {renderTabContent()} */}
      </View>
  )
}