import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ViewStyle,
} from "react-native";
import Feather from "../../assets/icons/chevron_rightside.svg";
import { ALERT_STYLES } from "@/constants/config";

type AlertType = "info" | "warning" | "danger";

interface AlertCardProps {
  type: AlertType;
  message: string;
  subMessage?: string;
}

const AlertCard: React.FC<AlertCardProps> = ({ type, message, subMessage }) => {
  const style = ALERT_STYLES[type];

  const containerStyle: ViewStyle[] = [
    styles.container,
    { backgroundColor: style.backgroundColor },
  ];
  return (
    <TouchableOpacity
      style={[containerStyle, { backgroundColor: style.backgroundColor }]}
      activeOpacity={0.9}
    >
      <View style={styles.leftContent}>
        <style.icon />
        <View style={styles.textContainer}>
          <Text style={styles.text}>
            <Text style={styles.boldText}>{message}</Text>
            {subMessage ? `\n${subMessage}` : ""}
          </Text>
        </View>
      </View>
      <Feather />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  leftContent: {
    flexDirection: "row",
    gap: 8,
  },
  container: {
    flexDirection: "row",
    backgroundColor: "#E5EBFD",
    borderRadius: 8,
    padding: 8,
    width: "100%",
    alignSelf: "center",
    alignItems: "flex-start",
    justifyContent: "space-between",
    height: 60,
    marginHorizontal: 16,
  },
  content: {
    flexDirection: "row",
    gap: 8,
  },
  textContainer: {
    marginLeft: 8,
    justifyContent: "center",
  },
  text: {
    color: "#252A34",
    fontSize: 14,
    lineHeight: 20,
    fontFamily: "Inter-Regular",
  },
  boldText: {
    fontWeight: "500",
  },
});

export default AlertCard;