import { Stack, Typography } from '@tidbcloud/uikit'
import dayjs from 'dayjs'

import { utcOffsetToTz } from 'dbaas/screens/OrgSettings/features/General/helpers'
import useStores from 'dbaas/stores/useStores'

export const CurrentTimezoneLabel = () => {
  const {
    store: { tenantData }
  } = useStores()
  const timezone = tenantData.timezone
  const localTimezone = dayjs().utcOffset() / 60
  return (
    <Stack px={14} pt={8} pb={6} gap={6}>
      {localTimezone !== timezone && (
        <Typography c="carbon.7" fz="xs">
          Local time zone: UTC
          {utcOffsetToTz(localTimezone)}
        </Typography>
      )}
      <Typography c="carbon.7" fz="xs">
        Currently used org time zone is: UTC
        {utcOffsetToTz(timezone)}
      </Typography>
    </Stack>
  )
}