import { Group, type SelectProps, Stack, Typography } from '@tidbcloud/uikit'
import { IconCheck } from '@tidbcloud/uikit/icons'

export const renderDescriptiveSelectOption: SelectProps['renderOption'] = ({ option, checked }) => (
  <Group wrap="nowrap" justify="space-between" sx={{ flex: 1 }}>
    <Stack gap={0}>
      <Typography variant="title-md" fw={500}>
        {option.label}
      </Typography>
      <Typography variant="body-lg" c="carbon.7">
        {/* @ts-ignore */}
        {option.description}
      </Typography>
    </Stack>

    {checked && <IconCheck size={16} strokeWidth={3} style={{ marginInlineStart: 'auto' }} />}
  </Group>
)