import React from 'react'
import { TabProps } from './typings'
import { Row } from '../../atoms/Row'
import Button from '../../atoms/Button'
import { TablistOnclick } from './deps'
import { ListWrapper, ItemList } from './styled'

class TabItems extends React.PureComponent<TabProps> {
  static defaultProps = {
    title: ['Sample Text 01', 'Sample Text 02', 'Sample Text 03'],
    isSelected: true,
  }

  render() {
    const { title, ...remainingProps } = this.props
    const list = []

    for (let i = 0; i < title.length; i++) {
      const item = (
        <ItemList onClick={() => TablistOnclick(i)}>
          <Button text={title[i]} />
        </ItemList>
      )

      list.push(item)
    }

    return (
      <Row>
        <ListWrapper>{list}</ListWrapper>
      </Row>
    )
  }
}

export default TabItems