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 { Deplacement } from '../types/deplacements.types';
import { getDeplacementStatusLabel } from '../utils/deplacements.utils';

type DeplacementDetailCardProps = {
  deplacement: Deplacement;
};

const DeplacementDetailCard = ({ deplacement }: DeplacementDetailCardProps) => {
  const statusStyle =
    deplacement.status === 'realise'
      ? styles.statusDone
      : deplacement.status === 'en_cours'
      ? styles.statusActive
      : styles.statusPending;

  return (
    <View style={styles.card}>
      <View style={styles.row}>
        <Text style={styles.label}>Ville de départ :</Text>
        <Text style={styles.value}>{deplacement.from_city}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Ville d’arrivée :</Text>
        <Text style={styles.value}>{deplacement.to_city}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Date de départ :</Text>
        <Text style={styles.value}>{deplacement.date_depart}</Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Distance :</Text>
        <Text style={[styles.value, styles.distance]}>
          <Feather name="activity" size={14} /> {deplacement.distance_km} km
        </Text>
      </View>

      <View style={styles.row}>
        <Text style={styles.label}>Statut :</Text>
        <Text style={[styles.value, statusStyle]}>
          {getDeplacementStatusLabel(deplacement.status)}
        </Text>
      </View>
    </View>
  );
};

export default DeplacementDetailCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    borderRadius: radius.lg,
    padding: spacing.lg,
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: spacing.sm,
    borderBottomWidth: 1,
    borderColor: colors.gray100,
  },
  label: {
    fontWeight: typography.fontWeight.semibold,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  value: {
    fontSize: typography.fontSize.sm,
    color: colors.textPrimary,
  },
  distance: {
    color: colors.success || '#6FBF73',
  },
  statusDone: {
    color: colors.success || '#6FBF73',
    fontWeight: typography.fontWeight.semibold,
  },
  statusPending: {
    color: colors.warning || '#E67E22',
    fontWeight: typography.fontWeight.semibold,
  },
  statusActive: {
    color: colors.primary,
    fontWeight: typography.fontWeight.semibold,
  },
});