import React, { Component } from 'react';

class Slots extends Component {
  render() {
    const slots = [
      "09.00 A.M - 10.00 A.M",
      "10.00 A.M - 11.00 A.M",
      "11.00 A.M - 12.00 P.M",
      "12.00 P.M - 01.00 P.M",
      "01.00 P.M - 02.00 P.M",
      "02.00 P.M - 03.00 P.M",
      "03.00 P.M - 04.00 P.M",
      "04.00 P.M - 05.00 P.M",
      "05.00 P.M - 06.00 P.M"
    ];

    return (
      <div className="slot_list">
        {slots.map((slot, index) => (
          <span key={index} onClick={() => console.log(`Slot ${index} clicked`)}>
            <h4>{slot}</h4>
          </span>
        ))}
      </div>
    );
  }
}

export default Slots;