/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import React, { } from "react";
import { useQuery } from "@tanstack/react-query";

import Link from "next/link";
import { ErrorMessage } from "@/components/ui/error-message";
import Loading from "../../components/loading";

import { geOneSeason } from "@/lib/features/admin/season/service";
import { SeasonProps } from "@/lib/features/admin/season/type";


interface Props {
    dataId: number;
}

export const ViewSeasonDialog = ({ dataId }: Props) => {


    const {
        data,
        isLoading,
        error
    } = useQuery({
        queryKey: ["view-season-details"],
        queryFn: () => geOneSeason(dataId),
    });




    if (isLoading) {
        return <Loading />;
    }


    //////////////////////error handling

    //error
    if (error) {
        return <ErrorMessage error={error} fallback="Dashboard error" />
    }

    // season details
    const detail: SeasonProps = data?.data?.details || null;




    return (
        <>


            <div className="h-auto max-h-[80vh] overflow-y-auto scrollbar-hide">
                <>
                    <div className="overflow-x-auto w-full grid grid-cols-1 gap-4">

                        <fieldset className="pl-2 text-sm font-bold border-4 rounded-[10px] text-neutral-600 pb-4">
                            <legend className="text-blue-700 text-center">
                                Season information
                            </legend>

                            <table className="min-w-full viewDetail" >
                                <tbody className="w-full">

                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Name:</b>
                                            <Link href="#">
                                                {" " + detail?.name}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={51} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Description:</b>
                                            <Link href="#">
                                                {" " + detail?.description}
                                            </Link>
                                        </td>
                                    </tr>


                                </tbody>
                            </table>
                        </fieldset>






                    </div>




                </>
            </div>
        </>
    );
};