import { type FC } from 'react'
import { useGetRequestDetail } from './hooks/useRequestData'
import { Link, useParams } from 'react-router-dom'
import RequestItem from './components/RequestItem'
import { Paths } from '@/config/Paths'
import Button from '@/components/Button'
import { TickSquare } from 'iconsax-react'
import TicketSection from '../order/components/TicketSection'

const RequestDetail: FC = () => {
    const { id } = useParams()
    const { data } = useGetRequestDetail(id!)

    return (
        <div className="w-full min-h-screen bg-[#eceef6] p-6">
            {/* Header Section */}
            <div className="flex items-start justify-between mb-6">
                <div className="text-sm text-[#8C90A3]">
                    درخواست #{data?.data?.requestNumber}
                </div>
                <Link to={Paths.perfomaInvoice.create + `?requestId=${id}`}>
                    <Button className="w-fit px-5">
                        <div className="flex gap-2 items-center">
                            <TickSquare size={20} color="black" />
                            <div>ثبت پیش فاکتور</div>
                        </div>
                    </Button>
                </Link>
            </div>

            {/* Request Information Section */}
            <div className="bg-white rounded-2xl p-6 mb-6">
                <div className='flex justify-between items-center'>
                    <h2 className="text-lg font-light mb-6">اطلاعات درخواست</h2>
                </div>
                <div className='flex flex-col gap-10'>
                    {data?.data?.items?.map((item) => (
                        <RequestItem key={item.id} item={item} />
                    ))}
                </div>
            </div>

            <TicketSection />
        </div>
    )
}

export default RequestDetail