import { serverFetch } from '@/app/hooks/serverFetch';
import { Parser } from "html-to-react";
import { FaWater } from "react-icons/fa";

export default async function About({ apiUrl }) {
    const home = await serverFetch(apiUrl);
    return (
        <>
            <div className="about-us py-15 flex relative">
                <div className="container">
                    <div className="">
                        <div className="lg:float-left w-full md:max-w-[500px] pb-5 md:pr-5">
                            <img src={home?.img} alt={home?.shortDescription || home?.name} title={home?.shortDescription || home?.name} className="max-w-full" />
                        </div>
                        <div className="">
                            {/* Small Label */}
                            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#273c8d]/10 text-[#273c8d] text-xs font-semibold uppercase tracking-wide">
                                <FaWater />
                                RCI Aquatech
                            </div>
                            <h1 className="block text-2xl md:text-[40px] font-semibold font">{home?.shortDescription}</h1>
                            {Parser().parse(home?.description || "")}
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}