import { Group, Stack, Typography } from '@tidbcloud/uikit'

import { IntegrationGroupType } from './config/type'
import { IntegrationCard } from './IntegrationCard'

export const IntegrationGroup = ({ data }: { data: IntegrationGroupType }) => {
  return (
    <Stack key={data.name}>
      <Typography variant="title-lg">{data.name}</Typography>
      <Group sx={{ alignItems: 'stretch' }}>
        {data.items.map((item) => (
          <IntegrationCard {...item} />
        ))}
      </Group>
    </Stack>
  )
}