import React from 'react';
import Image from 'next/image';
import moment from 'moment';

//type
import { SalonInfo } from '../../types/salonInfo';

//icons
import phone from '../../../public/icons/phone rings.svg';
import earth from '../../../public/icons/earth.svg';
import heart from '../../../public/icons/heart.svg';
import location from '../../../public/icons/Location.svg';
import time from '../../../public/icons/Time.svg';

//styles
import s from './SalonInfo.module.scss';
import CheckOpen from '../CheckOpen';

const SalonInfo = ({
  name,
  adress,
  adressUrl,
  //description,
  //phoneNumber,
  websiteUrl,
  workingHour,
}: SalonInfo) => {
  return (
    <div className={s.infoContainer}>
      <div className={s.upperText}>
        <div className={s.salonName}>
          <p>{name}</p>
        </div>
        <div className={s.icons}>
          <Image src={phone} alt="Phone Icon" />
          <a href={websiteUrl || ''}>
            <Image src={earth} alt="Earth Icon" />
          </a>
          <Image src={heart} alt="Heart Icon" />
        </div>
      </div>
      <div className={s.lowerText}>
        <div className={s.locationTime}>
          <div className={s.location}>
            <Image src={location} alt="Location Icon" />

            <a href={adressUrl} rel="noopener noreferrer">
              <p>{adress}</p>
            </a>

            <p>{adress}</p>
          </div>
          <div className={s.time}>
            <Image src={time} alt="Time Icon" />
            {workingHour ? (
              <div>
                <p className={s.workingHours}>
                  {moment(workingHour.openingHour).utc().format('HH:mm')} :{' '}
                  {moment(workingHour.closingHour).utc().format('HH:mm')}
                </p>
              </div>
            ) : (
              <p className={s.workingHours}>--:--</p>
            )}
          </div>
        </div>
        <CheckOpen workingHour={workingHour} />
      </div>
    </div>
  );
};

export default SalonInfo;