import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons';
import { Card } from '../../../components';
import { useTheme, fontFamily } from '../../../theme';
import { AwarenessArticle } from '../types';

interface AwarenessCardProps {
  article: AwarenessArticle;
  isBookmarked: boolean;
  onToggleBookmark: () => void;
  onPress: () => void;
}

export const AwarenessCard = ({
  article,
  isBookmarked,
  onToggleBookmark,
  onPress,
}: AwarenessCardProps) => {
  const theme = useTheme();

  return (
    <Pressable onPress={onPress}>
      <Card style={styles.card}>
      <View style={styles.header}>
        <View style={[styles.iconFrame, { backgroundColor: `${theme.colors.primary}12` }]}>
          <Ionicons name={article.icon as any} size={22} color={theme.colors.primary} />
        </View>
        <View style={styles.headerInfo}>
          <View style={styles.titleRow}>
            <Text style={[styles.category, { color: theme.colors.primary }]}>
              {article.category}
            </Text>
            {article.isUrgent && (
              <View style={[styles.urgentBadge, { backgroundColor: `${theme.colors.error}15` }]}>
                <Text style={[styles.urgentText, { color: theme.colors.error }]}>URGENT</Text>
              </View>
            )}
          </View>
          <Text style={[styles.title, { color: theme.colors.textPrimary }]} numberOfLines={1}>
            {article.title}
          </Text>
        </View>
        <Pressable hitSlop={10} onPress={onToggleBookmark} style={styles.bookmarkBtn}>
          <Ionicons
            name={isBookmarked ? 'bookmark' : 'bookmark-outline'}
            size={22}
            color={isBookmarked ? theme.colors.primary : theme.colors.textMuted}
          />
        </Pressable>
      </View>

      <Text style={[styles.description, { color: theme.colors.textSecondary }]} numberOfLines={2}>
        {article.description}
      </Text>

      <View style={styles.footer}>
        <View style={styles.tags}>
          {article.tags.slice(0, 2).map((tag) => (
            <View key={tag} style={[styles.tag, { backgroundColor: theme.colors.surfaceMuted }]}>
              <Text style={[styles.tagText, { color: theme.colors.textSecondary }]}>#{tag}</Text>
            </View>
          ))}
        </View>
        <View style={styles.readMore}>
          <Text style={[styles.readMoreText, { color: theme.colors.primary }]}>Read More</Text>
          <Ionicons name="chevron-forward" size={14} color={theme.colors.primary} />
        </View>
      </View>
    </Card>
  </Pressable>
  );
};

const styles = StyleSheet.create({
  card: {
    padding: 16,
    marginBottom: 16,
    gap: 12,
  },
  header: {
    flexDirection: 'row',
    gap: 12,
    alignItems: 'center',
  },
  iconFrame: {
    width: 44,
    height: 44,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerInfo: {
    flex: 1,
    gap: 2,
  },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  category: {
    fontSize: 11,
    fontFamily: fontFamily.bold,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  urgentBadge: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  urgentText: {
    fontSize: 9,
    fontFamily: fontFamily.bold,
  },
  title: {
    fontSize: 16,
    fontFamily: fontFamily.bold,
  },
  bookmarkBtn: {
    padding: 4,
  },
  description: {
    fontSize: 13,
    lineHeight: 18,
  },
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 4,
  },
  tags: {
    flexDirection: 'row',
    gap: 8,
  },
  tag: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
  },
  tagText: {
    fontSize: 10,
    fontFamily: fontFamily.semibold,
  },
  readMore: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  readMoreText: {
    fontSize: 13,
    fontFamily: fontFamily.bold,
  },
});