import { Tab } from '@mui/material'
import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
import { StyledComponentWrapper, StyledTabs } from './Styles'

export interface TabsContainerProps {
  tabs: {
    key: string
    label: string
    component: ReactNode
  }[]
  size?: 'small' | 'medium'
  onTabChange?: (tabKey: string) => void
  centered: any
  textColor?: any
  indicatorBackgroundColor?: any
}

export default function StyledTabsContainer({
  tabs,
  onTabChange,
  textColor,
  indicatorBackgroundColor,
}: TabsContainerProps) {
  const [currentTab, setCurrentTab] = useState(tabs[0].key)

  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
    setCurrentTab(value)
    onTabChange && onTabChange(value)
  }
  useEffect(() => {
    setCurrentTab(tabs[0].key)
  }, [])

  return (
    <>
      <StyledTabs
        onChange={handleTabsChange}
        value={currentTab}
        size="small"
        centered
        textColor={textColor}
        indicatorBackgroundColor={indicatorBackgroundColor}
      >
        {tabs.map((tab) => (
          <Tab key={tab.key} label={tab.label} value={tab.key} />
        ))}
      </StyledTabs>
      <StyledComponentWrapper>
        {tabs.find((tab) => tab.key === currentTab)?.component}
      </StyledComponentWrapper>
    </>
  )
}
