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

interface PropertyProps {
  name: string
  value: string
  isPlaceholder?: boolean
  mpEvent: string
  tooltip?: React.ReactNode
}

export const Property = ({ name, value = '', isPlaceholder, mpEvent, tooltip }: 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}
                  data-mp-event={mpEvent}
                  data-mp-field={name}
                >
                  {copied ? <IconCheck size={14} /> : <IconCopy01 size={14} strokeWidth={2} onClick={copy} />}
                </ActionIcon>
              </Tooltip>
            )}
          </CopyButton>
          {tooltip && (
            <HoverCard width={320} shadow="md" position="top">
              <HoverCard.Target>
                <ActionIcon variant="transparent" size="xs" color="carbon.7">
                  <IconInfoCircle size={14} />
                </ActionIcon>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Typography variant="body-lg">{tooltip}</Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          )}
        </Group>
      )}
    </Group>
  )
}