import { Group, Stack, Typography } from '@tidbcloud/uikit'
import { FormSegmentedControl } from '@tidbcloud/uikit/biz'

type SpecVersionProps = {
  formFieldName: string
  onChange?: (value: string) => void
}

export const SpecVersion = ({ formFieldName, onChange }: SpecVersionProps) => {
  return (
    <Stack gap={4}>
      <Group>
        <Typography variant="title-md">Node Spec Version</Typography>
        <Typography variant="body-md">(Only for AWS)</Typography>
      </Group>
      <Group>
        <Typography variant="body-md" sx={{ flex: 1 }}>
          Node spec versions represent different iterations of the same <b>vCPU and RAM</b> spec, offering improved
          performance and enhanced capabilities. Pricing may vary for the same spec. All nodes in a Dedicated cluster
          must use the same version.
        </Typography>
        <FormSegmentedControl
          name={formFieldName}
          onChange={onChange}
          data={[
            { label: 'V2', value: 'V2' },
            { label: 'V1 (Legacy)', value: 'V1' }
          ]}
        />
      </Group>
    </Stack>
  )
}