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

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

//icons
import ArrowUp from '../../../public/icons/ArrowUp.svg';
import ArrowDown from '../../../public/icons/ArrowDown.svg';

interface Appointment {
  id: number;
  name: string;
  image: StaticImageData;
  liked: boolean;
  address: string;
  open: boolean;
  reviewGrade: number;
  service: string;
  beginingService: string;
  dateService: number;
  monthService: string;
  endService: string;
  duration: number;
  description: string;
  price: number;
  worker: string;
}

const ProfileCard = ({ card }: { card: Appointment }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpener = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className={s.container}>
      <div onClick={handleOpener} className={s.chooseCard}>
        <div className={s.leftSection}>
          <p>{card.service}</p>
          <div className={s.dateHours}>
            <p className={s.date}>
              {card.dateService} {card.monthService}
            </p>
            <p className={s.time}>{card.beginingService} h</p>
          </div>
        </div>
        <div className={s.arrow}>
          {isOpen ? (
            <Image src={ArrowUp} alt="Arrow Up Icon" />
          ) : (
            <Image src={ArrowDown} alt="Arrow Up Icon" />
          )}
        </div>
      </div>

      {isOpen && <div>{card.address}</div>}
    </div>
  );
};

export default ProfileCard;