import { Feather } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { ActionItem } from '../types/actions.types';
import ActionStatusBadge from './ActionStatusBadge';

type ActionCardProps = {
  item: ActionItem;
};

const ActionCard = ({ item }: ActionCardProps) => {
  return (
    <View style={styles.card}>
      <View style={styles.headerRow}>
        <Text style={styles.name}>{item.user.name}</Text>
        <ActionStatusBadge status={item.status} />
      </View>

      <Text style={styles.sub}>
        <Feather name="calendar" size={13} color={colors.textSecondary} />{' '}
        {item.date_formatted} • {item.duree_mois} mois
      </Text>

      <Text style={styles.budget}>Budget: {item.budget} MAD</Text>

      <Text style={styles.text}>Type: {item.type}</Text>
      <Text style={styles.text}>Produit: {item.produit}</Text>

      <Text style={styles.objectif}>
        <Text style={styles.objectifLabel}>Objectif: </Text>
        {item.objectif}
      </Text>
    </View>
  );
};

export default ActionCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#EEF4FF',
    borderRadius: radius.xl,
    padding: spacing.lg,
    marginBottom: spacing.md,
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  headerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
  },
  name: {
    fontWeight: typography.fontWeight.bold,
    color: colors.primary,
    fontSize: typography.fontSize.md,
    flex: 1,
    marginRight: spacing.sm,
  },
  sub: {
    fontSize: typography.fontSize.xs,
    marginTop: spacing.xs,
    color: colors.textSecondary,
  },
  budget: {
    fontWeight: typography.fontWeight.bold,
    marginTop: spacing.sm,
    color: colors.textPrimary,
  },
  text: {
    fontSize: typography.fontSize.xs,
    marginTop: 4,
    color: colors.textPrimary,
  },
  objectif: {
    fontSize: typography.fontSize.xs,
    marginTop: spacing.sm,
    color: colors.textPrimary,
  },
  objectifLabel: {
    fontWeight: typography.fontWeight.bold,
  },
});