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=693f1a72&is=693dc8f2&hm=86ffb97145fc8d3aec822b87d99be233c98477d4424c1ef58f80eb81b17c7c80&" /*chantier.urlImg*/ }} style={styles.image} />
                </View>
                <View style={{flex: 1}}>
                    <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,
    gap: 10,
  },
  image:{
    width: 70,
    height: 140,
    borderRadius: 5,
  },
});