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

export const Encryption = ({ disabled, tooltip }: { disabled?: boolean; tooltip?: string }) => {
  return (
    <Stack gap={4} p="xl">
      <Group justify="space-between">
        <Typography variant="title-lg">Dual-Layer Data Encryption</Typography>

        <Tooltip label={tooltip} disabled={!disabled || !tooltip}>
          <div>
            <FormSwitch name="encrypted" disabled={disabled} />
          </div>
        </Tooltip>
      </Group>
      <Typography variant="body-lg" c="carbon.7">
        Add a second layer of encryption on top of the default Encryption at Rest with an isolated service-managed key.
      </Typography>
    </Stack>
  )
}