import { View, TouchableOpacity } from "react-native";
import { ExpandedEvent } from "@calchat/shared";
import { Feather } from "@expo/vector-icons";
import { useThemeStore } from "../stores/ThemeStore";
import { EventCardBase } from "./EventCardBase";

type EventCardProps = {
  event: ExpandedEvent;
  onEdit: () => void;
  onDelete: () => void;
};

export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
  const { theme } = useThemeStore();
  return (
    <View className="mb-3">
      <EventCardBase
        title={event.title}
        startTime={event.occurrenceStart}
        endTime={event.occurrenceEnd}
        description={event.description}
        recurrenceRule={event.recurrenceRule}
      >
        {/* Action buttons - TouchableOpacity with delayPressIn allows ScrollView to detect scroll gestures */}
        <View className="flex-row justify-end mt-3 gap-3">
          <TouchableOpacity
            onPress={onEdit}
            delayPressIn={100}
            activeOpacity={0.7}
            className="w-10 h-10 rounded-full items-center justify-center"
            style={{
              borderWidth: 1,
              borderColor: theme.borderPrimary,
            }}
          >
            <Feather name="edit-2" size={18} color={theme.textPrimary} />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={onDelete}
            delayPressIn={100}
            activeOpacity={0.7}
            className="w-10 h-10 rounded-full items-center justify-center"
            style={{
              borderWidth: 1,
              borderColor: theme.borderPrimary,
            }}
          >
            <Feather name="trash-2" size={18} color={theme.textPrimary} />
          </TouchableOpacity>
        </View>
      </EventCardBase>
    </View>
  );
};

export default EventCard;
