<Card 
  accessible={true} 
  accessibilityRole='form' 
  accessibilityLabel='Select your details'
  importantForAccessibility="yes"
>
  <CardHeader
    imageSource={require('../assets/bjork.png')}
    accessibilityLabel='Bjork image'
    accessibilityRole='image'
  >
    <CardTitle 
      style={styles.InterSemiBold} 
      accessibilityRole='heading'
      accessibilityLevel={1}
      nativeID="form-title"
    >
      Select music genre
    </CardTitle>
    <CardDescription 
      style={styles.Inter} 
      accessibilityRole='text'
      nativeID="form-description"
    >
      Customise your experience
    </CardDescription>
  </CardHeader>
  <CardContent>
    <Select
      defaultValue=''
      accessibilityLabel='Select music genre'
      accessibilityHint='Opens a list of genre options'
      accessibilityRole='combobox'
      accessibilityState={{ expanded: false }}
    >
      <SelectTrigger 
        ref={triggerRef} 
        className='w-full tracking-tighter'
        accessibilityRole='button'
        accessibilityLabel='Select music genre dropdown'
        accessibilityHint='Press to open genre options'
      >
        <SelectValue
          className='text-md text-foreground native:text-md'
          placeholder='Select music genre'
          style={styles.Inter}
          accessibilityLabel='Selected genre: None'
        />
      </SelectTrigger>
      <SelectContent 
        insets={contentInsets} 
        className='w-full mt-2'
        accessibilityRole='menu'
        accessibilityLabel='Genre options'
      >
        <SelectGroup 
          accessibilityRole='radiogroup'
          accessibilityLabel='Music genre options'
        >
          {[
            { label: 'Jazz', value: 'jazz' },
            { label: 'Electronica', value: 'electronica' },
            { label: 'Dub / Experimental', value: 'dub experimental' },
            { label: 'Rock', value: 'rock' },
          ].map((item) => (
            <SelectItem
              key={item.value}
              label={item.label}
              value={item.value}
              style={styles.Inter}
              accessibilityRole='radio'
              accessibilityLabel={item.label}
              accessibilityState={{ 
                checked: false, // This should dynamically update based on selection
                disabled: false 
              }}
              accessibilityHint={`Select ${item.label} as your music genre`}
            >
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
    <Text 
      style={styles.Inter} 
      className='mt-4' 
      accessibilityRole='text'
      accessibilityLabel='Additional information'
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </Text>
  </CardContent>
  <CardFooter className='flex-row justify-between mt-2'>
    <View 
      style={{ flex: 1, marginRight: 8 }}
      accessibilityElementsHidden={false}
      importantForAccessibility="no-hide-descendants"
    >
      <Button
        variant='secondary'
        textSize='md'
        className='w-full tracking-tighter'
        accessibilityRole='button'
        accessibilityLabel='Cancel selection'
        accessibilityHint='Cancels the genre selection process'
        accessibilityState={{ disabled: false }}
      >
        Cancel
      </Button>
    </View>
    <View 
      style={{ flex: 1 }}
      accessibilityElementsHidden={false}
      importantForAccessibility="no-hide-descendants"
    >
      <Button
        variant='default'
        textSize='md'
        className='w-full tracking-tighter'
        accessibilityRole='button'
        accessibilityLabel='Continue with selection'
        accessibilityHint='Confirms your genre selection and continues'
        accessibilityState={{ disabled: false }}
      >
        Continue
      </Button>
    </View>
  </CardFooter>
</Card>