import { Chantier } from '@/class/class';
import { ThemedView, } from '@/components/themed-view';
import React from 'react';
import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { ThemedText } from './themed-text';


type Props = {
    data: {
        chantier:Chantier|null;
    }
    style?: StyleProp<ViewStyle>;
};

export default function Anomaly({data,style , ...otherProps }: Props) {

  return(
    <View  style={style}>
        {data.chantier ? (
            <ThemedView lvl={4} style={styles.anomaliesContainer}>
                <ThemedText style={styles.anomaliesTitle}>Anomalies</ThemedText>
                {data.chantier.anomalies.length > 0 ? (
                  data.chantier.anomalies.map((anomaly, index) => (
                  <ThemedView key={index} lvl={2} style={styles.anomalyItem}>
                    <ThemedText>• {anomaly}</ThemedText>
                  </ThemedView>
                  ))
                ) : (
                  <ThemedText style={styles.noAnomaly}>Aucune anomalie</ThemedText>
                ) }
                </ThemedView>
        ): null}
    </View>
  )
}

const styles = StyleSheet.create({
  //Anomalies styles
  anomaliesContainer: {
    padding: 5,
    borderRadius: 10,
    height: 150,
  },
  anomaliesTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 8,
  },
  anomalyItem: {
    padding: 8,
    marginBottom: 5,
    borderRadius: 8,
  },
  noAnomaly: {
    fontStyle: "italic",
    opacity: 0.7,
  },
});