import { Alert, Share, StyleSheet, Text, View } from "react-native";
import { EventCard } from "../components/EventCard";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { events } from "../data/mockData";
import { colors } from "../theme/colors";
import { spacing } from "../theme/spacing";

export function EventsScreen() {
  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Evénements</Text>
        <Text style={styles.subtitle}>
          Les sorties, animations et temps forts proposés par Ambérieu Vitrines.
        </Text>
      </View>

      <View style={styles.section}>
        <SectionHeader title="A venir" subtitle={`${events.length} événements programmés`} />
        {events.map((event) => (
          <EventCard
            key={event.id}
            event={event}
            onAddToCalendar={() =>
              Alert.alert("Agenda", `${event.title} sera ajouté au calendrier natif.`)
            }
            onShare={() =>
              Share.share({
                message: `${event.title} - ${event.date}, ${event.time} à ${event.place}`
              })
            }
          />
        ))}
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  header: {
    gap: spacing.sm
  },
  title: {
    color: colors.ink,
    fontSize: 30,
    lineHeight: 34,
    fontWeight: "900"
  },
  subtitle: {
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600"
  },
  section: {
    gap: spacing.md
  }
});