import React, { FC } from 'react'
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'
import { CategoryModel } from '../../models'

interface ICategories {
  items?: CategoryModel []
}

const Categories: FC<ICategories> = ({
  items = []
}) => {
  const middleIndex = Math.ceil(items.length / 2)

  const firstHalf = items.splice(0, middleIndex)
  const secondHalf = items.splice(-middleIndex)

  return  <Card className="mb-4">
    <CardHeader>Categories</CardHeader>
    <CardBody>
      <Row>

        <Col sm="6">
          <ul className="list-unstyled mb-0">
            {firstHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
          </ul>
        </Col>
        <Col sm="6">
          <ul className="list-unstyled mb-0">
            {secondHalf.map((item, index) => <li key={index}><a href="#!">{item.text}</a></li>)}
          </ul>
        </Col>
      </Row>
    </CardBody>
  </Card>
}

export {
  Categories
}