import React, { useState, useEffect } from "react";
import { View } from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { tw, MyText, MyTouchableOpacity } from "common-ui";

interface FlashDeliveryNoteProps {
  onClose?: () => void;
  autoHide?: boolean;
  autoHideDelay?: number;
}

const FlashDeliveryNote: React.FC<FlashDeliveryNoteProps> = ({
  onClose,
  autoHide = true,
  autoHideDelay = 10000, // 10 seconds
}) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (!autoHide || !isVisible) return;

    const timer = setTimeout(() => {
      setIsVisible(false);
    }, autoHideDelay);

    return () => clearTimeout(timer);
  }, [autoHide, autoHideDelay, isVisible]);

  const handleDismiss = () => {
    setIsVisible(false);
    onClose?.();
  };

  if (!isVisible) return null;

  return (
    <View
      style={tw`mx-4 mt-4 mb-2 bg-amber-50 border border-amber-200 rounded-2xl shadow-sm overflow-hidden`}
    >
      <View style={tw`p-4`}>
        <View style={tw`flex-row items-start justify-between`}>
          <View style={tw`flex-row items-start flex-1`}>
            <View style={tw`w-8 h-8 bg-amber-100 rounded-full items-center justify-center mr-3 mt-0.5`}>
              <MaterialIcons name="bolt" size={18} color="#D97706" />
            </View>
            <View style={tw`flex-1`}>
              <MyText style={tw`text-amber-900 font-bold text-sm mb-1`}>
                Flash Delivery Notice
              </MyText>
              <MyText style={tw`text-amber-800 text-sm leading-5`}>
                Prices may differ for Flash Delivery and not all products are available for flash delivery
              </MyText>
            </View>
          </View>

          <MyTouchableOpacity
            onPress={handleDismiss}
            style={tw`w-8 h-8 rounded-full bg-amber-100 items-center justify-center ml-2`}
            activeOpacity={0.7}
          >
            <MaterialIcons name="close" size={16} color="#D97706" />
          </MyTouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default FlashDeliveryNote;