import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {Pill} from '@components';
import {TimeSlot} from '@modules/timeTracking/interfaces';

import {styles} from './styles';

interface Props {
  timeSlots?: TimeSlot[];
  style?: StyleProp<ViewStyle>;
}

function TimeSlotsDisplayer({timeSlots, style}: Props) {
  return timeSlots ? (
    <View style={[styles.container, style]}>
      {timeSlots.map(timeSlot => (
        <Pill
          key={JSON.stringify(timeSlot)}
          text={`${timeSlot.startTime} - ${timeSlot.endTime}`}
          variant="neutral"
        />
      ))}
    </View>
  ) : null;
}

export default TimeSlotsDisplayer;