import { HotelInfo } from '@/assets/types';
import styles from '@/styles/screens/reserva/detail.styles';
import { Image, Text, View } from 'react-native';
import { formatDateLong } from './formatters';
import { Stars } from './Stars';

type Props = {
  hotel: HotelInfo;
  isFirst: boolean;
};

export function HotelCard({ hotel, isFirst }: Props) {
  const img = hotel.imagemexterna || hotel.imageminterna;

  return (
    <View style={[styles.hotelRow, !isFirst && styles.blockBorderTop]}>
      <Image
        source={img ? { uri: img } : require('@/assets/icons/logo.png')}
        style={styles.hotelImage}
      />
      <View style={styles.hotelInfo}>
        <Stars stars={hotel.stars} />
        <Text style={styles.hotelName} numberOfLines={2}>
          {hotel.name}
        </Text>
        {!!hotel.regime && (
          <Text style={styles.hotelMetaLine}>
            <Text style={styles.hotelMetaLabel}>Regime: </Text>
            <Text style={styles.hotelMetaValue}>{hotel.regime}</Text>
          </Text>
        )}
        {!!hotel.data && (
          <Text style={styles.hotelMetaLine}>
            <Text style={styles.hotelMetaLabel}>Check-In: </Text>
            <Text style={styles.hotelMetaValue}>{formatDateLong(hotel.data)}</Text>
          </Text>
        )}
        <Text style={styles.hotelMetaLine}>
          <Text style={styles.hotelMetaLabel}>Nr. de Noites: </Text>
          <Text style={styles.hotelMetaValue}>
            {hotel.noites} {hotel.noites === 1 ? 'noite' : 'noites'}
          </Text>
        </Text>
      </View>
    </View>
  );
}