import { useTranslation } from "react-i18next";

import { Button, Card, Text } from "react-native-paper";

export default function ErrorDisplay({ errorMessage, error, onDismiss }) {
  const { t } = useTranslation();
  return (
    <Card style={{ margin: 8, backgroundColor: "#ffdddd" }}>
      <Card.Title title={t("general.labels.error")} titleVariant="titleLarge" />
      <Card.Content>
        <Text>
          {errorMessage ||
            error?.message ||
            error ||
            "An unknown error has occured."}
        </Text>
        {onDismiss ? (
          <Card.Actions>
            <Button onPress={onDismiss}>{t("general.labels.dismiss")}</Button>
          </Card.Actions>
        ) : null}
      </Card.Content>
    </Card>
  );
}