import { Typography, Card, Group } from '@tidbcloud/uikit'
import { FormTextInput, FormNumberInput } from '@tidbcloud/uikit/biz'

import { clusterNameRules, tidbPortRules } from 'dbaas/utils/validationRules'

export const ClusterInfo = ({ isDevTier, defaultName = '' }: { isDevTier?: boolean; defaultName?: string }) => {
  return (
    <Card>
      <Typography variant="headline-lg" mb={16}>
        Name Your Cluster
      </Typography>

      <Group>
        <FormTextInput
          name="name"
          label="Cluster Name"
          description="Create a unique name for your cluster."
          placeholder={defaultName}
          autoComplete="new-name"
          required
          withAsterisk
          rules={clusterNameRules}
          inputWrapperOrder={['label', 'input', 'description', 'error']}
        />

        {!isDevTier && (
          <FormNumberInput
            name="port"
            label="Port Number"
            description="TiDB port for connection."
            placeholder="4000"
            autoComplete="new-port"
            required
            rules={tidbPortRules}
            inputWrapperOrder={['label', 'input', 'description', 'error']}
          />
        )}
      </Group>
    </Card>
  )
}

export default ClusterInfo