"use client";
import React from "react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import Image from "next/image";
import { BASE_URL } from "@/Constant";
import GuidelineTable from "./GuidelineTable";

function RequiredRules({ data, bottom, table }: any) {
  const handleDownload = (fileName: string) => {
    const fileUrl = `${BASE_URL}${fileName}`;
    window.open(fileUrl, "_blank");
  };

  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-4xl px-4 text-center">
        <h1>{data?.required?.pageTitle}</h1>
        <div className="safe flex items-center justify-center">
          <SafeHtmlRenderer htmlContent={data?.required?.pageSubTitle} />
        </div>
      </div>

      <div className="container mx-auto px-8 py-16 md:py-16">
        <div className="md:flex items-center">
          <div className="safe flex-1">
            <SafeHtmlRenderer htmlContent={data?.required?.shortContent} />
          </div>

          <div className="w-full md:w-[40%]">
            <div className="bg-white rounded-2xl p-4 shadow-lg h-full">
              <div className="relative aspect-square rounded-lg overflow-hidden w-full h-full">
                <Image
                  fill
                  unoptimized={true}
                  src={`${BASE_URL}${data?.required?.mainImage}`}
                  alt="Digital transformation concept"
                  className="object-cover"
                  sizes="(min-width: 768px) 40vw, 100vw"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="safe px-8">
        <SafeHtmlRenderer htmlContent={data?.required?.fullContent} />
      </div>
      <GuidelineTable table={table} />
    </div>
  );
}

export default RequiredRules;