import React from "react";
import { View } from "react-native";
import { useStyles } from "./HelperText.style";
import { Text } from "../../Text";
import { Icon } from "../../Icon";

export interface HelperTextProps {
  /**
   * The helper message.
   */
  readonly message: string;

  /**
   * `neutral` renders subdued supporting text. `critical` renders an `alert`
   * icon followed by error-coloured supporting text.
   *
   * @default "neutral"
   */
  readonly status?: "neutral" | "critical";
}

export function HelperText({ message, status = "neutral" }: HelperTextProps) {
  const styles = useStyles();
  const isCritical = status === "critical";

  return (
    <View
      style={[styles.row, isCritical ? styles.rowCritical : styles.rowNeutral]}
      accessible={isCritical || undefined}
      accessibilityRole={isCritical ? "alert" : undefined}
      accessibilityLiveRegion={isCritical ? "assertive" : undefined}
    >
      {isCritical && (
        <View style={styles.iconContainer}>
          <Icon name="alert" size="small" color="critical" />
        </View>
      )}
      <Text level="textSupporting" variation={isCritical ? "error" : "subdued"}>
        {message}
      </Text>
    </View>
  );
}