import { StyleSheet, Text, View } from "react-native";
import { Megaphone } from "lucide-react-native";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { news } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";

export function NewsScreen() {
  return (
    <Screen>
      <View style={styles.header}>
        <Text style={styles.title}>Actualités locales</Text>
        <Text style={styles.subtitle}>
          Nouveaux commerces, recrutements, initiatives et informations utiles.
        </Text>
      </View>

      <View style={styles.section}>
        <SectionHeader title="Dernières nouvelles" />
        {news.map((item) => (
          <View key={item.id} style={styles.card}>
            <View style={styles.iconWrap}>
              <Megaphone color={colors.primary} size={20} strokeWidth={2.5} />
            </View>
            <View style={styles.cardText}>
              <Text style={styles.meta}>
                {item.category} · {item.date}
              </Text>
              <Text style={styles.cardTitle}>{item.title}</Text>
              <Text style={styles.excerpt}>{item.excerpt}</Text>
            </View>
          </View>
        ))}
      </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
  },
  card: {
    borderRadius: radius.lg,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.md,
    flexDirection: "row",
    gap: spacing.md
  },
  iconWrap: {
    width: 44,
    height: 44,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primarySoft
  },
  cardText: {
    flex: 1,
    gap: spacing.xs
  },
  meta: {
    color: colors.primary,
    fontSize: 11,
    fontWeight: "900"
  },
  cardTitle: {
    color: colors.ink,
    fontSize: 16,
    lineHeight: 20,
    fontWeight: "900"
  },
  excerpt: {
    color: colors.muted,
    fontSize: 13,
    lineHeight: 19,
    fontWeight: "600"
  }
});