import React from 'react'
import { serverFetch } from '@/app/hooks/serverFetch'
import Breadcrumb from './Breadcrumb';
import { Parser } from 'html-to-react';

const Detail = async ({ apiUrl }) => {
    const data = await serverFetch(apiUrl);
    // console.log(data)
    return (
        <>
            <Breadcrumb name={data?.name} />
            <div className="services py-15">
                <div className="container">
                    <div className="row flex-wrap justify-between flex">
                        <div className="service-content-detils w-full">

                            <div className="product-img">
                                <img src={data?.img} alt={data?.name} title={data?.name} className="rounded-3xl float-left w-[35%] mr-4" />

                                <h2 className="text-[25px] mb-4">{data?.shortDescription?data?.shortDescription:data?.name}</h2>
                                <div className='text-[14px] text-slate-600 text-justify'>
                                    {Parser().parse(data?.description || "")}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Detail