<Card
  accessible={true}
  accessibilityRole="form"
  accessibilityLabel="Login form"
  importantForAccessibility="yes"
>
  <CardHeader
    imageSource={require("../assets/guy.png")}
    accessibilityLabel="Login form illustration"
    accessibilityRole="image"
    accessibilityElementsHidden={true}
  >
    <CardTitle
      style={styles.InterSemiBold}
      accessibilityRole="heading"
      accessibilityLevel={1}
      nativeID="login-title"
    >
      Log in to your account
    </CardTitle>
    <CardDescription
      style={styles.Inter}
      accessibilityRole="text"
      nativeID="login-description"
    >
      Enter your details to continue
    </CardDescription>
  </CardHeader>
  <CardContent>
    <View style={{ marginBottom: 8 }}>
      <Label
        style={styles.label}
        nativeID="emailLabel"
        accessibilityRole="text"
      >
        Email
      </Label>
      <Input
        placeholder="Enter your email"
        accessibilityLabel="Email input"
        accessibilityHint="Enter your email address"
        accessibilityLabelledBy="emailLabel"
        style={[styles.input, { marginTop: 4 }]}
        accessibilityRequired={true}
        accessibilityState={{
          disabled: false,
          required: true,
        }}
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
      />
    </View>
    <View>
      <Label
        style={styles.label}
        nativeID="passwordLabel"
        accessibilityRole="text"
      >
        Password
      </Label>
      <View className="relative">
        <Input
          placeholder="Enter your password"
          secureTextEntry={!showPassword}
          accessibilityLabel="Password input"
          accessibilityHint="Enter your password"
          accessibilityLabelledBy="passwordLabel"
          style={[styles.input, { marginTop: 4 }]}
          accessibilityRequired={true}
          accessibilityState={{
            disabled: false,
            required: true,
          }}
          autoComplete="password"
        />
        <TouchableOpacity
          onPress={togglePasswordVisibility}
          className="absolute -translate-y-1/2 right-3 top-1/2"
          accessibilityRole="button"
          accessibilityLabel={showPassword ? "Hide password" : "Show password"}
          accessibilityHint="Double tap to toggle password visibility"
          accessibilityState={{
            checked: showPassword,
          }}
        >
          {showPassword ? (
            <Eye size={20} color="#9CA3AF" accessibilityElementsHidden={true} />
          ) : (
            <EyeOff
              size={20}
              color="#9CA3AF"
              accessibilityElementsHidden={true}
            />
          )}
        </TouchableOpacity>
      </View>
    </View>
  </CardContent>
  <CardFooter className="flex-row justify-between">
    <View
      style={{ flex: 1, marginRight: 8 }}
      accessibilityElementsHidden={false}
    >
      <Button
        variant="secondary"
        textSize="md"
        className="w-full tracking-tighter"
        accessibilityRole="button"
        accessibilityLabel="Cancel login"
        accessibilityHint="Cancels the login process"
        accessibilityState={{ disabled: false }}
      >
        Cancel
      </Button>
    </View>
    <View style={{ flex: 1 }} accessibilityElementsHidden={false}>
      <Button
        variant="default"
        textSize="md"
        className="w-full tracking-tighter"
        accessibilityRole="button"
        accessibilityLabel="Continue login"
        accessibilityHint="Submits the login form"
        accessibilityState={{ disabled: false }}
      >
        Continue
      </Button>
    </View>
  </CardFooter>
</Card>;