import React from 'react';
import Image from 'next/image';
import { Gender } from '@/types/gender';
//import { StaticImageData } from 'next/image';

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

//styles
import s from './ChooseSalonCard.module.scss';
import { SalonLanding } from '@/types/salon';
import CheckOpen from '../CheckOpen';

const ChooseSalonCard = ({ salon }: { salon: SalonLanding }) => {
  return (
    <div className={s.chooseCard}>
      <Image
        className={s.cardImage}
        src={testImage}
        alt="User Icon"
        placeholder="blur"
      />
      <div className={s.textContainer}>
        <div className={s.upperText}>
          <div className={s.nameAddress}>
            <h2>{salon.name}</h2>
            <p>{salon.adress}</p>
          </div>
          <CheckOpen workingHour={salon.workingHour} />
        </div>
        <div className={s.lowerText}>
          <div className={s.genderText}>
            <Image className={s.cardIcon} src={userIcon} alt="User Icon" />
            <p>{Gender[salon.gender]}</p>
          </div>
          {salon.rating ? (
            <div className={s.reviewText}>
              <Image className={s.cardIcon} src={starIcon} alt="Star Icon" />
              <p>{salon.rating}</p>
            </div>
          ) : (
            <div className={s.reviewText}>
              <p>No ratings</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ChooseSalonCard;