import { ActionIcon, CopyButton, Group, Tooltip, Typography, TypographyProps } from '@tidbcloud/uikit'
import { IconCheck, IconCopy01 } from '@tidbcloud/uikit/icons'

interface CopyablePropertyProps {
  label: string
  value: string
  labelProps?: TypographyProps
  valueProps?: TypographyProps
  mpEvent: string
}

export const CopyableProperty = ({ label, value = '', labelProps, valueProps, mpEvent }: CopyablePropertyProps) => {
  return (
    <Group gap={8} sx={{ rowGap: 4 }}>
      <Typography variant="label-lg" color="carbon.7" fz={13} {...labelProps}>
        {label}:{' '}
      </Typography>
      <Group gap={8} sx={{ rowGap: 4 }}>
        <Typography variant="body-lg" color="carbon.9" fz={13} {...valueProps}>
          {value}
        </Typography>
        <CopyButton value={value} timeout={2000}>
          {({ copied, copy }) => (
            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
              <ActionIcon
                variant="transparent"
                size="sm"
                c={valueProps?.color || 'carbon.8'}
                onClick={copy}
                data-mp-event={mpEvent}
                data-mp-field={label}
              >
                {copied ? <IconCheck size={14} /> : <IconCopy01 size={14} strokeWidth={2} onClick={copy} />}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Group>
    </Group>
  )
}