import { Skeleton } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import { SumInfoItem } from 'dbaas/screens/ClustersV2/new/components'

interface SummaryItemProps {
  loading: boolean
  label: string
  name: string
  defaultValue?: string | number
  isError?: boolean
}

export const SummaryItem = observer(({ loading, name, label, defaultValue, isError }: SummaryItemProps) => {
  const { watch } = useFormContext()
  const value = watch(name)

  return (
    <SumInfoItem
      label={label}
      value={loading ? <Skeleton width={80} height={16} /> : (defaultValue ?? value)}
      isError={isError}
      labelProps={{ w: 144 }}
    />
  )
})