import { CalendarDays, MapPin, Share2 } from "lucide-react-native";
import { StyleSheet, Text, View } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { LocalEvent } from "../types/domain";
import { AppButton } from "./AppButton";

interface EventCardProps {
  event: LocalEvent;
  onAddToCalendar: () => void;
  onShare: () => void;
}

export function EventCard({ event, onAddToCalendar, onShare }: EventCardProps) {
  return (
    <View style={styles.card}>
      <View style={[styles.cover, { backgroundColor: event.coverColor }]}>
        <CalendarDays color={colors.primary} size={24} strokeWidth={2.4} />
        {event.highlight ? <Text style={styles.highlight}>A la une</Text> : null}
      </View>
      <View style={styles.body}>
        <Text style={styles.title}>{event.title}</Text>
        <Text style={styles.date}>
          {event.date} · {event.time}
        </Text>
        <View style={styles.place}>
          <MapPin color={colors.primary} size={15} strokeWidth={2.4} />
          <Text style={styles.placeText}>{event.place}</Text>
        </View>
        <Text style={styles.description}>{event.description}</Text>
        <View style={styles.actions}>
          <AppButton label="Agenda" onPress={onAddToCalendar} compact />
          <AppButton label="Partager" onPress={onShare} icon={Share2} variant="secondary" compact />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: radius.lg,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface
  },
  cover: {
    height: 86,
    padding: spacing.md,
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between"
  },
  highlight: {
    color: colors.primary,
    backgroundColor: colors.surface,
    borderRadius: radius.pill,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs,
    fontSize: 12,
    fontWeight: "900"
  },
  body: {
    padding: spacing.md,
    gap: spacing.sm
  },
  title: {
    color: colors.ink,
    fontSize: 18,
    lineHeight: 22,
    fontWeight: "900"
  },
  date: {
    color: colors.primary,
    fontSize: 13,
    fontWeight: "900"
  },
  place: {
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.xs
  },
  placeText: {
    color: colors.ink,
    fontSize: 13,
    fontWeight: "700"
  },
  description: {
    color: colors.muted,
    fontSize: 13,
    lineHeight: 19,
    fontWeight: "600"
  },
  actions: {
    flexDirection: "row",
    gap: spacing.sm,
    marginTop: spacing.xs
  }
});