'use client';
import React from 'react';

//api
import { useFetchSalonPage } from '@/api/useFetchSalonPage';

import SalonGalery from '@/components/SalonGalery';
import SalonInfo from '@/components/SalonInfo';
import Title from '@/components/Title';
import ServicesContainer from '@/components/ServicesContainer';
import ReviewSection from '@/components/ReviewSection';
import Navbar from '@/components/Navbar';

const SalonPage = ({ id }: { id: number }) => {
  const { data: pageSalon, isLoading } = useFetchSalonPage(id);
  if (isLoading) <div>Loading...</div>;

  return (
    <>
      <Navbar />
      <SalonGalery />
      <SalonInfo
        name={pageSalon?.data.name}
        adress={pageSalon?.data.adress}
        adressUrl={pageSalon?.data.adressUrl}
        description={pageSalon?.data.description}
        phoneNumber={pageSalon?.data.phoneNumber}
        websiteUrl={pageSalon?.data.websiteUrl}
        workingHour={pageSalon?.data.workingHour}
      />
      <Title text={'Odabir usluga'} />
      <ServicesContainer salonId={pageSalon?.data.id} />
      <ReviewSection />
    </>
  );
};

export default SalonPage;