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

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

export default function ChantierSummary({data,style , ...otherProps }: Props) {
  return(
    <View style={style}>
        {data.chantier ? (
            <ThemedView lvl={4} style={styles.chantier}>
                <View>
                    <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
                </View>
                <View>
                    <ThemedText>Adresse: {data.chantier.adresse}</ThemedText>
                    <ThemedText>Chef de chantier: {data.chantier.chef.last_name}{" "}{data.chantier.chef.name}</ThemedText>
                    <ThemedText>État: {data.chantier.etat}</ThemedText>
                </View>
            </ThemedView>
        ) : 
            <ThemedText>
                Pas de chantier Selectionné
            </ThemedText>
        }
    </View>
  )
}

const styles = StyleSheet.create({
  chantier: {
    padding: 5,
    //marginTop:5,
    //margin:5,
    borderRadius: 10,
    //borderWidth: 1,
    flexDirection: 'row',
    height: 150,
  },
  image:{
    margin:0,
    width: 70,
    height: 140,
    borderRadius: 5,
    marginRight: 10,
  },
});