import {
  View,
  Text,
  StyleSheet,
} from "react-native";

import { Ionicons } from "@expo/vector-icons";

import { Colors, Spacing } from "../constants/theme";

type AlertItemProps = {
  title: string;
  description: string;
  time: string;
  type?: "started" | "near" | "danger" | "completed";
};

export default function AlertItem({
  title,
  description,
  time,
  type = "started",
}: AlertItemProps) {
  const theme = Colors.light;

  const getColor = () => {
  switch (type) {
    case "started":
      return "#B8C4BE";

    case "near":
      return "#22C55E";

    case "danger":
      return "#EF4444";

    case "completed":
      return "#B8C4BE";

    default:
      return "#9CA3AF";
  }
};

const getIcon = () => {
  switch (type) {
    case "started":
      return "navigate";

    case "near":
      return "time-outline";

    case "danger":
      return "warning-outline";

    case "completed":
      return "checkmark-done";

    default:
      return "notifications";
  }
};

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: "#FFFFFF",
        },
      ]}
    >
      <View
        style={[
          styles.iconContainer,
          {
            backgroundColor: `${getColor()}20`,
          },
        ]}
      >
        <Ionicons
          name={getIcon()}
          size={22}
          color={getColor()}
        />
      </View>

      <View style={styles.content}>
        <View style={styles.header}>
          <Text
            style={[
              styles.title,
              {
                color: theme.text,
              },
            ]}
          >
            {title}
          </Text>

          <Text style={styles.time}>
            {time}
          </Text>
        </View>

        <Text
          style={[
            styles.description,
            {
              color: theme.textSecondary,
            },
          ]}
        >
          {description}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",

    padding: 18,

    marginBottom: 16,

    borderRadius: 22,

    alignItems: "flex-start",

    shadowColor: "#000",

    shadowOffset: {
      width: 0,
      height: 6,
    },

    shadowOpacity: 0.05,

    shadowRadius: 10,

    elevation: 4,
  },

  iconContainer: {
    width: 42,
    height: 42,

    borderRadius: 21,

    justifyContent: "center",
    alignItems: "center",

    marginRight: 14,
  },

  content: {
    flex: 1,
  },

  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 6,
  },

  title: {
    fontSize: 16,
    fontWeight: "700",
  },

  time: {
    fontSize: 12,
    color: "#9CA3AF",
  },

  description: {
    fontSize: 14,
    lineHeight: 20,
  },
});