'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

import blueArrow from '../../../public/icons/BlueArrow.svg';

//styles
import s from './ServicesCard.module.scss';
import { SalonPageServices } from '@/types/services';

const ServicesCard = ({ service }: { service: SalonPageServices }) => {
  const imageClick = (e: React.MouseEvent<HTMLImageElement>) => {
    e.preventDefault();
  };

  return (
    <article className={s.servicesCard}>
      <div className={s.leftText}>
        <h2>{service.name}</h2>
        <div className={s.durationButton}>
          <p>trajanje: {service.duration}</p>
          <button>vidi više...</button>
        </div>
        <h2>{service.price} EUR</h2>
      </div>
      <Link className={s.arrowContainer} href="/salon">
        <Image onClick={() => imageClick} src={blueArrow} alt="User Icon" />
      </Link>
    </article>
  );
};

export default ServicesCard;