import { useTheme } from "@/hooks";
import { useTranslation } from "react-i18next";

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

export default function ErrorDisplay({ errorMessage, error, onDismiss }) {
  const { t } = useTranslation();
  const theme = useTheme();
  return (
    <Card
      mode="outlined"
      style={{ margin: 8, backgroundColor: theme?.colors?.errorContainer }}
    >
      <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>
  );
}
