import React from 'react';

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

//types
import { SalonPageServices } from '@/types/services';

//components
import ServicesCard from '../ServicesCard';
import Button from '../Button/Button';
import { useFetchSalonServices } from '@/api/useFetchSalonServices';
import Link from 'next/link';

const ServicesContainer = ({ salonId }: { salonId: number }) => {
  const { data: services, isLoading } = useFetchSalonServices(salonId);

  if (isLoading) <div>Loading...</div>;
  //const firstThreeService = services?.slice(0, 3);

  return (
    <section className={s.servicesContainer}>
      {services?.map((service: SalonPageServices) => (
        <div key={service.id}>
          <ServicesCard service={service} />
        </div>
      ))}
      <Link
        href={{
          pathname: `${salonId}/services`,
        }}
      >
        <Button>Prikaži više</Button>
      </Link>
    </section>
  );
};

export default ServicesContainer;