'use client'

import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import { useAboutData } from './hooks/useAboutData'
import PageLoading from '@/components/PageLoading'
import Image from 'next/image'

const AboutPage: NextPage = () => {
    const { data, isLoading, error } = useAboutData()

    if (isLoading) {
        return <PageLoading />
    }

    if (error) {
        return (
            <Layout>
                <div className="mt-14 px-4 md:px-8 lg:px-20 text-center">
                    <p className="text-red-500">خطا در دریافت اطلاعات</p>
                </div>
            </Layout>
        )
    }

    const aboutData = data?.results?.aboutUs || []

    return (
        <Layout>
            <div className="mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 max-w-full overflow-x-hidden">
                {/* عنوان اصلی */}
                <div className="text-center mb-8 sm:mb-12 lg:mb-16">
                    <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800">
                        درباره ی ما
                    </h1>
                </div>

                {/* بخش‌های محتوا */}
                <div className="space-y-8 sm:space-y-10 lg:space-y-12">
                    {aboutData.map((item) => (
                        <div
                            key={item._id}
                            className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 lg:gap-8"
                        >
                            {/* تصویر */}
                            <div className="rounded-lg flex-shrink-0 overflow-hidden w-full sm:w-auto">
                                <Image
                                    src={item.imageUrl}
                                    alt={item.title}
                                    className="w-full sm:w-[120px] md:w-[140px] lg:w-[160px] h-auto object-cover"
                                    loading="lazy"
                                    width={200}
                                    height={200}
                                />
                            </div>

                            {/* محتوای متنی */}
                            <div className="flex-1 space-y-3 sm:space-y-4 text-center sm:text-right">
                                {/* عنوان بخش */}
                                <h3 className="text-base sm:text-lg lg:text-xl font-bold text-primary">
                                    {item.title}
                                </h3>

                                {/* توضیحات */}
                                <p className="font-light leading-5 sm:leading-6 text-sm sm:text-base">
                                    {item.description}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </Layout>
    )
}

export default AboutPage