'use client'

import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import { ArrowRotateLeft } from 'iconsax-react'
import Link from 'next/link'
import { useGetSiteSetting } from '../privacy/hooks/usePrivacyData'

const ReturnPolicyPage: NextPage = () => {

    const { data } = useGetSiteSetting('returnRulesContent')

    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">
                {/* Breadcrumb */}
                <div className="mb-6 sm:mb-8">
                    <Breadcrumb>
                        <BreadcrumbList>
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href="/" className="text-gray-600 hover:text-gray-800">
                                        خانه
                                    </Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator className='rotate-180' />
                            <BreadcrumbItem>
                                <BreadcrumbPage className="text-gray-800 font-medium">
                                    قوانین مرجوعی کالا
                                </BreadcrumbPage>
                            </BreadcrumbItem>
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>

                {/* عنوان اصلی */}
                <div className="text-center mb-8 sm:mb-12">
                    <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 rounded-full mb-4 sm:mb-6">
                        <ArrowRotateLeft
                            size={32}
                            color='#000000'
                            className="sm:w-10 sm:h-10 text-primary"
                        />
                    </div>
                    <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-3 sm:mb-4">
                        قوانین مرجوعی کالا
                    </h1>
                    <p className="text-gray-600 text-sm sm:text-base max-w-2xl mx-auto leading-relaxed">
                        سیاست‌های بازگشت کالا و شرایط مرجوعی در فروشگاه ما را مطالعه کنید
                    </p>
                </div>

                <Separator className="mb-8 sm:mb-12" />

                {/* محتوای اصلی */}
                {data?.results ? (
                    <div className="bg-white rounded-lg border border-gray-100 shadow-sm p-4 sm:p-6 lg:p-8">
                        <div
                            className="prose prose-sm sm:prose-base lg:prose-lg prose-gray max-w-none
                                prose-headings:text-gray-800 prose-headings:font-bold
                                prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-4
                                prose-li:text-gray-700 prose-li:leading-relaxed
                                prose-strong:text-gray-800 prose-strong:font-semibold
                                prose-ul:space-y-2 prose-ol:space-y-2"
                            dangerouslySetInnerHTML={{ __html: data.results.siteSetting.returnRulesContent }}
                        />
                    </div>
                ) : (
                    <div className="bg-white rounded-lg border border-gray-100 shadow-sm p-8 text-center">
                        <div className="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full mb-4">
                            <ArrowRotateLeft size={20} className="text-gray-400" />
                        </div>
                        <p className="text-gray-500 text-sm sm:text-base">
                            در حال بارگذاری اطلاعات...
                        </p>
                    </div>
                )}

            </div>
        </Layout>
    )
}

export default ReturnPolicyPage
