import { Divider, Group, HoverCard, Loader, Stack } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { ReactNode } from 'react'

import { HeadLabel } from 'dbaas/screens/ClustersV2/new/components'

export function CardSection({
  children,
  title,
  tooltip,
  isFetching,
  rightSection
}: {
  title: string
  children: ReactNode
  tooltip?: ReactNode
  isFetching?: boolean
  rightSection?: ReactNode
}) {
  return (
    <>
      <Group px={24} pt={24} pb={16} justify="space-between">
        <Group gap={8}>
          <HeadLabel label={title} />
          {tooltip && (
            <HoverCard shadow="md" withArrow>
              <HoverCard.Target>
                <IconInfoCircle size={16} />
              </HoverCard.Target>
              <HoverCard.Dropdown maw={400}>{tooltip}</HoverCard.Dropdown>
            </HoverCard>
          )}
          {isFetching && <Loader size="xs" />}
        </Group>

        {rightSection}
      </Group>

      <Stack px={24} pb={16}>
        {children}
      </Stack>

      <Divider />
    </>
  )
}