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

interface PropertyProps {
  name: string
  value: string
  isPlaceholder?: boolean
  mpProps: {
    'data-mp-event': string
    [p: `data-mp-${string}`]: string
  }
}

export const Property = ({ name, value = '', isPlaceholder, mpProps }: PropertyProps) => {
  return (
    <Group>
      <Typography variant="label-lg" c="carbon.7" fz={13}>
        {name}:{' '}
      </Typography>
      {isPlaceholder && (
        <Typography variant="body-lg" c="carbon.6" fz={13}>
          {value}
        </Typography>
      )}
      {!isPlaceholder && (
        <Group gap={8}>
          <Typography variant="body-lg" c="carbon.9" fz={13}>
            {value}
          </Typography>
          <CopyButton value={value} timeout={2000}>
            {({ copied, copy }) => (
              <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
                <ActionIcon
                  variant="transparent"
                  size="sm"
                  c="carbon.8"
                  onClick={copy}
                  {...mpProps}
                  data-mp-field={name}
                >
                  {copied ? <IconCheck size={14} /> : <IconCopy01 size={14} onClick={copy} />}
                </ActionIcon>
              </Tooltip>
            )}
          </CopyButton>
        </Group>
      )}
    </Group>
  )
}