import React from "react";
import { Text, type TextProps, type TextStyle } from "react-native";
import { Theme } from "../../theme/theme";

type Variant = "logo" | "title" | "body" | "muted" | "error";

type Props = TextProps & {
  variant?: Variant;
  style?: TextStyle | TextStyle[];
};

export default function AppText({ variant = "body", style, ...props }: Props) {
  const base: TextStyle = {
    color: Theme.Colors.text,
    fontSize: Theme.FontSize.md,
  };

  const variants: Record<Variant, TextStyle> = {
    logo: { fontSize: Theme.FontSize.xxl, fontWeight: Theme.FontWeight.bold },
    title: { fontSize: Theme.FontSize.xl, fontWeight: Theme.FontWeight.bold },
    body: { fontSize: Theme.FontSize.md },
    muted: { color: Theme.Colors.mutedText, fontSize: Theme.FontSize.sm },
    error: { color: Theme.Colors.danger, fontSize: Theme.FontSize.sm },
  };

  return <Text {...props} style={[base, variants[variant], style]} />;
}