import React from 'react'

import { Carousel } from 'antd'
import { useParams } from 'react-router-dom'
import useSWR from 'swr'

import { getClusterSlogan } from '~/api'

export const Slogans: React.FC = () => {
  const { orgId, cid } = useParams<'orgId' | 'cid'>()
  const { data: sloganRes } = useSWR(
    `/orgs/${orgId}/clusters/${cid}/slogans`,
    () => getClusterSlogan(orgId!, cid!, 5, 1)
  )

  if (!sloganRes || (sloganRes.data?.items?.length ?? 0) === 0) {
    return null
  }

  return (
    <div className='bg-cc-primary rounded cluster-slogan-root shadow-sm'>
      <Carousel
        autoplay
        speed={2000}
        autoplaySpeed={4000}
        waitForAnimate={true}
      >
        {(sloganRes.data.items ?? []).map((md) => (
          <div key={md.id}>
            <div
              className='p-4 min-h-[64px] text-white'
              dangerouslySetInnerHTML={{ __html: md.text! }}
            />
          </div>
        ))}
      </Carousel>
    </div>
  )
}