import { Contract } from 'common/contract'
import { range } from 'lodash'
import { Carousel } from 'web/components/carousel'
import { ContractCard } from 'web/components/contract/contract-card'
import { ShowTime } from 'web/components/contract/contract-details'
import { Col } from 'web/components/layout/col'

export function DoubleCarousel(props: {
  contracts: Contract[]
  showTime?: ShowTime
  loadMore?: () => void
}) {
  const { contracts, showTime, loadMore } = props
  return (
    <Carousel className="-mx-4 mt-2 sm:-mx-10" loadMore={loadMore}>
      <div className="shrink-0 sm:w-6" />
      {contracts.length >= 6
        ? range(0, Math.floor(contracts.length / 2)).map((col) => {
            const i = col * 2
            return (
              <Col className="snap-start scroll-m-4" key={contracts[i].id}>
                <ContractCard
                  contract={contracts[i]}
                  className="mb-2 w-96 shrink-0"
                  questionClass="line-clamp-3"
                  trackingPostfix=" tournament"
                  showTime={showTime}
                />
                <ContractCard
                  contract={contracts[i + 1]}
                  className="mb-2 w-96 shrink-0"
                  questionClass="line-clamp-3"
                  trackingPostfix=" tournament"
                  showTime={showTime}
                />
              </Col>
            )
          })
        : contracts.map((c) => (
            <ContractCard
              key={c.id}
              contract={c}
              className="mb-2 max-h-[220px] w-96 shrink-0"
              questionClass="line-clamp-3"
              trackingPostfix=" tournament"
              showTime={showTime}
            />
          ))}
    </Carousel>
  )
}