import { useQuery } from "@tanstack/react-query";
import Warning from "../../../assets/gifs/warning.gif";
import useAxios from "../../../hooks/useAxios";
import Alert from "../../../components/alert/Alert";
import Button from "../../../components/button";

type TermsContent = {
  title: string;
  introduction: string;
  notice: string;
  preamble: string;
  clauses: string[];
};

const Rules = () => {
  const axios = useAxios();
  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["siteTerms"],
    queryFn: async () => {
      const response = await axios.get<{ result: TermsContent }>("/home/terms");
      return response.data.result;
    },
    staleTime: 0,
  });

  if (isLoading) {
    return <p role="status" className="p-4 text-center">در حال دریافت قوانین و مقررات...</p>;
  }

  if (isError || !data) {
    return (
      <div className="p-4 flex flex-col items-center gap-3">
        <Alert type="warning">دریافت قوانین و مقررات انجام نشد. دوباره تلاش کنید.</Alert>
        <Button onClick={() => refetch()}>تلاش دوباره</Button>
      </div>
    );
  }

  return (
    <div className="relative w-full h-full flex flex-col px-4 py-4 text-start" dir="rtl">
      <h1 className="font-bold text-xl md:text-2xl text-center">{data.title}</h1>
      {data.introduction && (
        <p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.introduction}</p>
      )}
      {data.notice && (
        <p className="font-bold text-sm mt-2 md:text-lg text-yellow-500 text-start whitespace-pre-line">{data.notice}</p>
      )}
      {data.preamble && (
        <p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.preamble}</p>
      )}
      <ul className="w-full h-full mt-2">
        {data.clauses.map((clause, index) => (
          <li key={index} className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
            <img src={Warning} alt="" className="w-[2rem] shrink-0" />
            <p className="font-normal max-sm:text-xs max-md:text-sm md:text-lg text-start whitespace-pre-line">{clause}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Rules;