import React from 'react';
import moment from 'moment';
//import { StaticImageData } from 'next/image';
import Image from 'next/image';

//images
import testImage from '../../../public/images/image3.jpg';
import starIcon from '../../../public/icons/Star.svg';

//styles
import s from './ReccommendedSalonCard.module.scss';

//types
import { SalonReccommended } from '@/types/salon';

//components
import CheckOpen from '../CheckOpen';

const ReccommendedSalonCard = ({ salon }: { salon: SalonReccommended }) => {
  return (
    <article className={s.reccommendedCard}>
      <Image
        className={s.cardImage}
        src={testImage}
        alt="User Icon"
        placeholder="blur"
      />

      <div className={s.textContainer}>
        <div className={s.leftText}>
          <div className={s.nameAddress}>
            <h2 className={s.name}>{salon.name}</h2>
            <p className={s.address}>{salon.adress}</p>
          </div>
          {salon.workingHour ? (
            <div>
              <p className={s.workingHours}>
                {moment(salon.workingHour.openingHour).utc().format('HH:mm')} :{' '}
                {moment(salon.workingHour.closingHour).utc().format('HH:mm')}
              </p>
            </div>
          ) : (
            <p className={s.workingHours}>--:--</p>
          )}
        </div>
        <div className={s.rightText}>
          <CheckOpen workingHour={salon.workingHour} />
          {salon.rating ? (
            <div className={s.fullReview}>
              <Image src={starIcon} alt="User Icon" />
              <p className={s.rightText}> {salon.rating}</p>
            </div>
          ) : (
            <p>No Reviews</p>
          )}
        </div>
      </div>
    </article>
  );
};

export default ReccommendedSalonCard;