<Card
  accessible={true}
  accessibilityRole="article"
  accessibilityLabel="Movie screening card for Halloween III"
  importantForAccessibility="yes"
>
  <CardHeader
    imageSource={require("../assets/halloween.png")}
    accessibilityLabel="Halloween III movie poster"
    accessibilityRole="image"
  >
    <View className="flex-row items-center justify-between">
      <CardTitle
        style={styles.InterSemiBold}
        accessibilityRole="heading"
        accessibilityLevel={2}
        nativeID="card-title"
      >
        Halloween III
      </CardTitle>
      <Badge
        variant="warning"
        accessibilityLabel="Screening status: Last screening"
        accessibilityRole="text"
      >
        <Text>Last screening</Text>
      </Badge>
    </View>
    <CardDescription
      style={styles.Inter}
      accessibilityRole="text"
      accessibilityLabel="Ticket price: 12 dollars"
      nativeID="card-description"
    >
      $12.00
    </CardDescription>
  </CardHeader>
  <CardContent>
    <View
      className="flex-row gap-1"
      accessibilityLabel="Available screening times"
      accessibilityRole="group"
      accessibilityHint="List of available screening times for Halloween III"
    >
      <Badge
        variant="default"
        accessibilityLabel="5:30 PM screening"
        accessibilityRole="button"
      >
        <Text className="text-xs text-sys-text-secondary">5:30PM</Text>
      </Badge>
      <Badge
        variant="default"
        accessibilityLabel="6:30 PM screening"
        accessibilityRole="button"
      >
        <Text className="text-xs text-sys-text-secondary">6:30PM</Text>
      </Badge>
      <Badge
        variant="default"
        accessibilityLabel="7:30 PM screening"
        accessibilityRole="button"
      >
        <Text className="text-xs text-sys-text-secondary">7:30PM</Text>
      </Badge>
      <Badge
        variant="default"
        accessibilityLabel="8:30 PM screening"
        accessibilityRole="button"
      >
        <Text className="text-xs text-sys-text-secondary">8:30PM</Text>
      </Badge>
    </View>
  </CardContent>
  <CardFooter className="flex-row justify-between mt-0">
    <View style={{ flex: 1, marginRight: 8 }}>
      <Button
        variant="default"
        textSize="md"
        className="w-full tracking-tighter"
        accessibilityRole="button"
        accessibilityLabel="Continue to ticket selection"
        accessibilityHint="Proceeds to select seats and purchase tickets for Halloween III"
        accessibilityState={{ disabled: false }}
      >
        Continue
      </Button>
    </View>
  </CardFooter>
</Card>;