import { Box, Button, Card, Group, NavLink, Typography } from '@tidbcloud/uikit'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'

import { IntegrationItemType } from './config/type'

type IntegrationLinkProps = {
  label: string
  href: string
  icon?: React.ReactNode
}

export const IntegrationLink = ({ label, href, icon }: IntegrationLinkProps) => (
  <NavLink
    w="auto"
    label={label}
    variant="subtle"
    c="peacock.7"
    component="a"
    target="_blank"
    leftSection={icon}
    href={href}
  />
)

export const IntegrationCard = (props: IntegrationItemType) => (
  <Card w={330} pb={0} sx={props.sx}>
    <Card.Section p="lg" withBorder sx={{ flex: 1 }}>
      {props.logo}
      <Group gap={8} align="center" mt={16} mb={4}>
        <Typography variant="title-md">{props.name}</Typography>
        {props.nameBadge}
      </Group>
      <Typography variant="body-md">{props.description}</Typography>
    </Card.Section>
    <Group justify="space-between" py="sm">
      <Box>{props.actionLeftSection}</Box>
      {props.actionButton && props.actionButton}
      {props.documentUrl && (
        <Button
          h={32}
          size="md"
          type="subtle"
          component="a"
          href={props.documentUrl}
          variant="subtle"
          c="carbon.8"
          leftSection={<IconLinkExternal01 size={16} />}
        >
          Use
        </Button>
      )}
    </Group>
  </Card>
)