"use client";

import {
  formatLocation,
  setEncryptedCookie,
} from "@/src/utils/commonFunctions";
import moment from "moment";
import { useEffect, useState } from "react";
import { Toast } from "../../Toast";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useDispatch } from "react-redux";
import { mediaUpload } from "@/redux/thunks/Master/master.thunk";
import { AppDispatch, RootState } from "@/redux/slices";
import { decryptData } from "@/src/utils/encryptionFunctions";
import { AUTH_COOKIES } from "@/src/utils/commonVariables";
import { raiseDispute } from "@/redux/thunks/Booking/booking.thunk";
import Image from "next/image";
import LoaderGIF from "@/public/images/loader.gif";
import { useSelector } from "react-redux";
import { useRouter, useSearchParams } from "next/navigation";

export default function DisputeForm({
  bookingDetails,
}: {
  bookingDetails: any;
}) {
  const [files, setFiles] = useState<File[]>([]);
  const [dragActive, setDragActive] = useState(false);
  const dispatch = useDispatch<AppDispatch>();

  const searchParams = useSearchParams();
  const router = useRouter();

  useEffect(() => {
    const tid = searchParams.get("tid");

    if (tid) {
      setEncryptedCookie(AUTH_COOKIES.USER_TOKEN, tid);

      const url = new URL(window.location.href);
      url.searchParams.delete("tid");
      router.replace(url.toString());
    }
  }, [searchParams, router]);

  const { isRaiseDisputeLoading } = useSelector(
    (state: RootState) => state.booking
  );

  const { mediaUploadLoading } = useSelector(
    (state: RootState) => state.masterActions
  );

  // Updated schema with images as optional array
  const disputeSchema = z.object({
    description: z.string().min(1, { message: "Please describe your dispute" }),
    images: z.array(z.instanceof(Blob)).optional(),
  });

  type DisputeFormData = z.infer<typeof disputeSchema>;

  const {
    handleSubmit,
    formState: { errors },
    register,
    reset,
    setValue,
    watch,
  } = useForm<DisputeFormData>({
    resolver: zodResolver(disputeSchema),
    defaultValues: {
      description: "",
      images: [],
    },
  });

  // Watch description for character count
  const description = watch("description") || "";

  /**
   * Handles the change event of the file input field.
   * Updates the list of files with the newly selected files.
   * Also updates the 'images' field of the form with the new list of files.
   * Triggers validation of the 'images' field.
   * @param {React.ChangeEvent<HTMLInputElement>} e - The change event triggered on file input change.
   */
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const newFiles = Array.from(e.target.files);
      const updatedFiles = [...files, ...newFiles];
      setFiles(updatedFiles);
      setValue("images", updatedFiles, { shouldValidate: true });
    }
  };

  /**
   * Handles drag events on the drop area.
   * Prevents the default behavior of the drag event, and updates the drag active state accordingly.
   * @param {React.DragEvent<HTMLDivElement>} e - The drag event triggered on the drop area.
   */
  const handleDrag = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true);
    } else if (e.type === "dragleave") {
      setDragActive(false);
    }
  };

  /**
   * Handles drop events on the drop area.
   * Prevents the default behavior of the drop event, updates the drag active state and
   * adds the dropped files to the list of files.
   * Also updates the 'images' field of the form with the new list of files.
   * Triggers validation of the 'images' field.
   * @param {React.DragEvent<HTMLDivElement>} e - The drop event triggered on the drop area.
   */
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);

    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      const newFiles = Array.from(e.dataTransfer.files);
      const updatedFiles = [...files, ...newFiles];
      setFiles(updatedFiles);
      setValue("images", updatedFiles, { shouldValidate: true });
    }
  };

  /**
   * Removes a file from the list of files at the given index.
   * Updates the 'images' field of the form with the new list of files.
   * Triggers validation of the 'images' field.
   * @param {number} index - The index of the file to remove.
   */
  const removeFile = (index: number) => {
    const updatedFiles = files.filter((_, i) => i !== index);
    setFiles(updatedFiles);
    setValue("images", updatedFiles, { shouldValidate: true });
  };

  /**
   * Clears all files from the list of files.
   * Updates the 'images' field of the form with an empty array.
   * Triggers validation of the 'images' field.
   */
  const clearAllFiles = () => {
    setFiles([]);
    setValue("images", [], { shouldValidate: true });
  };

  /**
   * Handles the submission of the dispute form.
   * If images exist, uploads them to the server and then calls raiseDispute with the uploaded media IDs.
   * If no images exist, directly calls raiseDispute.
   * @param {DisputeFormData} data - The data from the dispute form.
   */
  const onSubmit = (data: DisputeFormData) => {
    /**
     * Submits the dispute form to the server.
     * If mediaIds is provided, the function will upload the images to the server and then call raiseDispute with the uploaded media IDs.
     * If no mediaIds are provided, the function will directly call raiseDispute.
     * @param {string[]} mediaIds - Optional array of media IDs to be uploaded to the server.
     */
    const submitDispute = (mediaIds: string[] = []) => {
      const payload = {
        description: data.description,
        bookingId: bookingDetails?.bookingId,
        images: mediaIds,
      };

      dispatch(
        raiseDispute(payload, (response) => {
          if (response?.meta?.status === 0) {
            Toast("error", response?.meta?.message);
          } else {
            Toast("success", response?.meta?.message);
            reset();
            setFiles([]);
          }
        })
      );
    };

    // Check if images exist and need to be uploaded
    if (data?.images && data?.images?.length > 0) {
      const formData = new FormData();

      data.images.forEach((file) => {
        formData.append("multipleImage", file);
      });
      formData.append("fileType", "disputes");

      dispatch(
        mediaUpload(formData, (response: any) => {
          if (response.meta.status) {
            const mediaIds = response?.data?.fileId || [];
            submitDispute(mediaIds);
          } else {
          }
        })
      );
    } else {
      // No images to upload, directly call raiseDispute
      submitDispute();
    }
  };

  /**
   * Returns an icon based on the file type.
   * If the file type starts with "image/", an image icon is returned.
   * If the file type starts with "video/", a video icon is returned.
   * Otherwise, a document icon is returned.
   * @param {File} file - The file object to determine the icon for.
   * @returns {JSX.Element} - The icon element based on the file type.
   */
  const getFileIcon = (file: File) => {
    if (file.type.startsWith("image/"))
      return (
        <i
          className={`Icon IconImage shrink-0 !w-[15px] md:w-auto !h-[15px] md:h-auto !bg-white`}
        ></i>
      );
    if (file.type.startsWith("video/"))
      return (
        <i
          className={`Icon IconVideo shrink-0 !w-[18px] md:w-auto !h-[18px] md:h-auto !bg-white`}
        ></i>
      );
    return (
      <i
        className={`Icon IconDoc shrink-0 !w-[18px] md:w-auto !h-[18px] md:h-auto !bg-white`}
      ></i>
    );
  };

/**
 * Resets the form and clears the files array.
 */
  const handleClearData = () => {
    reset();
    setFiles([]);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-teal-50 to-slate-50 py-8 md:py-12 px-4 md:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto relative z-10">
        <div className="bg-white rounded-3xl shadow-lg overflow-hidden border border-slate-200">
          <div className="relative bg-gradient-to-r from-[#006a71] via-[#008891] to-[#006a71] px-8 py-8 md:py-14 overflow-hidden">
            <div className="absolute inset-0 opacity-5">
              <div className="absolute top-0 left-0 w-64 h-64 bg-white rounded-full -translate-x-32 -translate-y-32"></div>
              <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full translate-x-48 translate-y-48 opacity-20"></div>
            </div>
            <div className="relative z-10">
              <div className="flex items-center gap-3 mb-3">
                <div className="h-1.5 w-12 bg-[#ff7e67] rounded-full shadow-md"></div>
                <h2 className="h3 font-bold text-white drop-shadow-lg">
                  Raise a dispute
                </h2>
              </div>
              <p className="text-white fs-18 leading-[1.6] font-medium drop-shadow">
                Submit a detailed dispute regarding your booking. Our team will
                review and respond within 24-48 hours.
              </p>
            </div>
          </div>

          <div className="px-4 py-6 md:p-8 xl:p-10">
            {/* Booking Details Section */}
            <div className="mb-10">
              <div className="flex items-center gap-3 mb-6">
                <div className="h-1.5 w-12 bg-gradient-to-r from-[#006a71] to-[#ff7e67] rounded-full"></div>
                <h3 className="h5 !font-fw700 text-[#006a71]">
                  Booking Information
                </h3>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 bg-white rounded-2xl p-4 md:p-6 border border-slate-200 transition-all duration-300">
                  <div className="flex items-center gap-4 mb-4">
                    <div className="bg-gradient-to-br from-[#006a71] to-[#008891] w-[50px] h-[50px] flex justify-center items-center rounded-xl shadow-md">
                      <i
                        className={`Icon IconLocation shrink-0 !w-[28px] md:w-auto !h-[28px] md:h-auto !bg-white`}
                      ></i>
                    </div>
                    <div className="flex-1">
                      <h4 className="fs-20 font-bold text-gray-900 !mb-0">
                        {bookingDetails?.summary?.headline}
                      </h4>
                      <p className="text-gray-600 !text-[14px] leading-relaxed">
                        {formatLocation({
                          streetName:
                            bookingDetails?.summary?.propertyLocation
                              ?.streetName,
                          city: bookingDetails?.summary?.propertyLocation?.city,
                          state:
                            bookingDetails?.summary?.propertyLocation?.state,
                          country:
                            bookingDetails?.summary?.propertyLocation
                              ?.countryData?.name,
                          zip: bookingDetails?.summary?.propertyLocation?.zip,
                        })}
                      </p>
                    </div>
                  </div>

                  <div className="grid sm:grid-cols-2 gap-4 mt-6">
                    <div className="bg-gradient-to-br from-[#006a71]/5 to-transparent rounded-xl p-4 border border-[#006a71]/10 hover:border-[#006a71]/30 transition-all">
                      <div className="flex items-center gap-2 mb-3">
                        <i
                          className={`Icon IconDate shrink-0 !w-[18px] !h-[18px] !bg-[#006a71]`}
                        ></i>
                        <p className=" !text-[14px] !font-fw800 text-[#006a71] uppercase tracking-wide">
                          Check In
                        </p>
                      </div>
                      <p className="fs-18 !font-fw800 text-gray-900">
                        {bookingDetails?.summary?.checkInDate &&
                          moment(bookingDetails?.summary?.checkInDate).format(
                            "DD MMM, YYYY"
                          )}
                      </p>
                    </div>
                    <div className="bg-gradient-to-br from-[#ff7e67]/5 to-transparent rounded-xl p-4 border border-[#ff7e67]/10 hover:border-[#ff7e67]/30 transition-all">
                      <div className="flex items-center gap-2 mb-3">
                        <i
                          className={`Icon IconDate shrink-0 !w-[18px] !h-[18px] !bg-[#ff7e67]`}
                        ></i>
                        <p className="!text-[14px] !font-fw800 text-[#ff7e67] uppercase tracking-wide">
                          Check Out
                        </p>
                      </div>
                      <p className="fs-18 !font-fw800 text-gray-900">
                        {bookingDetails?.summary?.checkOutDate &&
                          moment(bookingDetails?.summary?.checkOutDate).format(
                            "DD MMM, YYYY"
                          )}
                      </p>
                    </div>
                  </div>

                  <div className="grid sm:grid-cols-2 gap-4 mt-4">
                    <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
                      <div className="flex items-center gap-2 mb-3">
                        <i
                          className={`Icon IconUserGroup shrink-0 !w-[18px] !h-[18px] !bg-[#006a71]`}
                        ></i>
                        <p className="!text-[14px] !font-fw800 text-gray-600 uppercase tracking-wide">
                          Guests
                        </p>
                      </div>
                      <p className="h6 !font-fw800 text-gray-900">
                        {bookingDetails?.summary?.numberOfGuest}
                      </p>
                    </div>
                    <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
                      <p className="!text-[14px] !font-fw800 text-gray-600 uppercase tracking-wide mb-2">
                        Reference
                      </p>
                      <p className="!text-[16px] !font-fw800 text-[#006a71] break-all">
                        #{bookingDetails?.bookingReferenceNum}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  {/* Payment Info */}
                  <div className="bg-gradient-to-br from-[#006a71] to-[#008891] rounded-2xl p-6 text-white shadow-lg transition-all duration-300">
                    <div className="flex items-center gap-2 mb-4">
                      <i
                        className={`Icon IconCreditCard shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-white`}
                      ></i>
                      <p className="!text-[14px] !font-fw600 !tracking-[1.5px] uppercase opacity-90">
                        Total Amount
                      </p>
                    </div>
                    <p className="h4 font-bold mb-2">
                      {bookingDetails?.summary?.priceBreakDown?.currencySymbol}
                      {bookingDetails?.summary?.priceBreakDown?.totalPrice}
                    </p>
                    <div className="bg-white/15 backdrop-blur-sm rounded-lg px-3 py-2 mt-4 border border-white/30">
                      <p className="!text-[12px] !mb-1 opacity-90">
                        Payment Method
                      </p>
                      <p className="!text-[16px] !font-fw600 capitalize">
                        {bookingDetails?.paymentDetailsData?.cardType}
                      </p>
                    </div>
                  </div>

                  {/* Guest Info */}
                  <div className="bg-gradient-to-br from-[#ff7e67] to-[#ff6a52] rounded-2xl p-6 text-white shadow-lg transition-all duration-300">
                    <p className="!text-[14px] !font-fw600 !tracking-[1.5px] uppercase mb-2.5">
                      Guest Details
                    </p>
                    <div className="space-y-2">
                      <div>
                        <p className="!text-[14px] !mb-1 opacity-90">Name</p>
                        <p className="fs-14 !font-fw600">
                          {bookingDetails?.guestDetails?.firstName}{" "}
                          {bookingDetails?.guestDetails?.lastName}
                        </p>
                      </div>
                      <div>
                        <p className="!text-[14px] !mb-1 opacity-90">Email</p>
                        <p className="fs-14 !font-fw600 break-all">
                          {bookingDetails?.guestDetails?.email}
                        </p>
                      </div>
                      <div>
                        <p className="!text-[14px] !mb-1 opacity-90">Phone</p>
                        <p className="fs-14 !font-fw600">
                          {bookingDetails?.guestDetails?.phoneNumber}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Host Details */}
                  <div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm transition-all">
                    <p className="!text-[14px] !font-fw800 !tracking-[1px] uppercase mb-2.5 text-[#006a71]">
                      Host Details
                    </p>
                    <div className="space-y-2">
                      <div>
                        <p className="!text-[14px] !mb-1 text-gray-600">Name</p>
                        <p className="fs-14 !font-fw600 text-gray-900">
                          {bookingDetails?.hostDetails?.firstName}{" "}
                          {bookingDetails?.hostDetails?.lastName}
                        </p>
                      </div>
                      <div>
                        <p className="!text-[14px] !mb-1 text-gray-600">
                          Email
                        </p>
                        <p className="!text-[16px] !font-fw600 text-gray-700 break-all">
                          {bookingDetails?.hostDetails?.email}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Dispute Form Section */}
            <form onSubmit={handleSubmit(onSubmit)}>
              <div>
                <div className="flex items-center gap-3 mb-6">
                  <div className="h-1.5 w-12 bg-gradient-to-r from-[#006a71] to-[#ff7e67] rounded-full"></div>
                  <h2 className="h5 !font-fw700 text-[#006a71]">
                    Dispute Details
                  </h2>
                </div>

                {/* Text Area */}
                <div className="mb-8 relative">
                  <label
                    htmlFor="description"
                    className="block !text-[16px] !font-fw700 text-gray-900 mb-3"
                  >
                    Describe Your Dispute{" "}
                    <span className="text-[#ff7e67]">*</span>
                  </label>
                  <div className="relative">
                    <textarea
                      id="description"
                      rows={7}
                      {...register("description")}
                      className="w-full px-5 py-4 border-2 border-slate-300 rounded-2xl focus:ring-2 focus:ring-[#006a71]/20 focus:border-[#006a71] transition-all duration-300 resize-none text-gray-700 placeholder-gray-400 shadow-sm focus:shadow-md bg-white"
                      placeholder="Please describe your dispute, including what happened, when it occurred, the issues you are experiencing, and any relevant evidence or circumstances."
                    />
                    <div className="absolute bottom-4 right-4 bg-gradient-to-r from-[#006a71] to-[#008891] text-white  !font-fw500 min-w-[36px] text-center px-3 py-1 rounded-full shadow-md">
                      <p className="!text-[16px] leading-0 !text-center font-bold">
                        {description.length}
                      </p>
                    </div>
                  </div>
                  {errors.description && (
                    <p className="error-msg mt-2 font-medium">
                      {errors.description.message}
                    </p>
                  )}
                </div>

                {/* File Upload Area */}
                <div className="mb-8">
                  <label className="block text-[16px] !font-fw700 text-gray-900 mb-3">
                    Upload Supporting Evidence
                    <span className="text-gray-500 font-normal text-xs ml-2">
                      (Images, Videos, Documents)
                    </span>
                  </label>
                  <div
                    onDragEnter={handleDrag}
                    onDragLeave={handleDrag}
                    onDragOver={handleDrag}
                    onDrop={handleDrop}
                    className={`relative border-2 border-dashed rounded-2xl  text-center transition-all duration-300 ${
                      dragActive
                        ? "border-[#006a71] bg-gradient-to-br from-[#006a71]/5 to-[#ff7e67]/5 shadow-md"
                        : "border-slate-300 hover:border-[#006a71]/50 bg-gradient-to-br from-slate-50 to-slate-100"
                    }`}
                  >
                    <input
                      type="file"
                      id="file-upload"
                      multiple
                      accept="image/*,video/*"
                      onChange={handleFileChange}
                      className="hidden"
                    />
                    <label
                      htmlFor="file-upload"
                      className="cursor-pointer flex flex-col items-center py-8 px-4 md:p-10"
                    >
                      <div className="relative mb-6">
                        <div className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-[#006a71] to-[#008891] rounded-2xl flex items-center justify-center shadow-md hover:shadow-lg transition-all transform hover:scale-110">
                          <i
                            className={`Icon IconUpload shrink-0 md:!w-[30px] !w-[24px] md:!h-[30px] !h-[24px] !bg-white`}
                          ></i>
                        </div>
                        <div className="absolute -top-2 -right-2 md:w-8 w-6 md:h-8 h-6 bg-gradient-to-br from-[#ff7e67] to-[#ff6a52] rounded-full flex items-center justify-center shadow-md">
                          <span className="text-white text-xl font-bold">
                            +
                          </span>
                        </div>
                      </div>
                      <p className="fs-20 !font-fw800 text-[#006a71] mb-2">
                        Drop your files here
                      </p>
                      <p className="text-sm text-gray-600 mb-4">
                        or click to browse from your device
                      </p>
                      <div className="flex items-center gap-2 flex-wrap justify-center">
                        {["JPG", "PNG", "GIF", "MP4", "MOV"].map((format) => (
                          <span
                            key={format}
                            className="px-3 py-1 bg-white border-2 border-slate-200 rounded-full text-xs font-medium text-[#006a71] hover:border-[#006a71] hover:bg-[#006a71]/5 transition-all"
                          >
                            {format}
                          </span>
                        ))}
                      </div>
                    </label>
                  </div>

                  {/* File Preview */}
                  {files.length > 0 && (
                    <div className="mt-6">
                      <div className="flex items-center justify-between mb-4">
                        <p className="text-[16px] !font-fw700 text-[#006a71] !mb-0">
                          Uploaded Files ({files.length})
                        </p>
                        <button
                          type="button"
                          onClick={clearAllFiles}
                          className="text-[16px] !font-fw700 text-[#ff7e67] hover:text-[#ff6a52] transition-colors"
                        >
                          Clear All
                        </button>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {files.map((file, index) => (
                          <div
                            key={index}
                            className="flex items-center justify-between bg-white p-4 rounded-xl border border-slate-200 hover:border-[#006a71]/50 transition-all duration-300 hover:shadow-md"
                          >
                            <div className="flex items-center space-x-3 flex-1 min-w-0">
                              <div className="bg-gradient-to-br from-[#006a71] to-[#008891] w-[30px] h-[30px] flex items-center justify-center rounded-lg flex-shrink-0 shadow-sm">
                                <div className="text-white">
                                  {getFileIcon(file)}
                                </div>
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className="fs-16 !font-fw600 text-gray-900 truncate !mb-1">
                                  {file.name}
                                </p>
                                <p className="!text-[16px] !font-fw500 text-gray-600 mt-1">
                                  {(file.size / 1024 / 1024).toFixed(2)} MB
                                </p>
                              </div>
                            </div>
                            <button
                              type="button"
                              onClick={() => removeFile(index)}
                              className="group ml-3 p-2 text-gray-400 hover:text-white hover:bg-[#ff7e67] rounded-lg transition-all duration-300 flex-shrink-0"
                            >
                              <i
                                className={`Icon IconCross shrink-0 !w-[15px] md:w-auto !h-[15px] md:h-auto !bg-gray-400 group-hover:!bg-white`}
                              ></i>
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex items-stretch gap-4 justify-end pt-6 border-t border-slate-200">
                <button type="button" className="SecondaryBorderedBtn" onClick={() => handleClearData()}>
                  Cancel
                </button>
                <button type="submit" className="SecondaryBtn min-w-[125px]">
                  {mediaUploadLoading || isRaiseDisputeLoading ? (
                    <Image
                      src={LoaderGIF}
                      alt="loader-gif"
                      className={`w-fill !h-[35px] object-contain`}
                      width={50}
                      height={35}
                    />
                  ) : (
                    "Submit"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>

        {/* Info Box */}
        <div className="mt-8 bg-white rounded-2xl shadow-md px-4 py-6 md:p-6 xl:p-8 border-l-4 border-[#ff7e67] hover:shadow-lg transition-shadow">
          <div className="flex items-start gap-4">
            <div className="bg-gradient-to-br from-[#ff7e67] to-[#ff6a52] w-[50px] h-[50px] flex justify-center items-center rounded-xl shadow-md  flex-shrink-0">
              <i
                className={`Icon IconLocation shrink-0 !w-[28px] md:w-auto !h-[28px] md:h-auto !bg-white`}
              ></i>
            </div>
            <div>
              <h3 className="fs-20 !font-fw800 !mb-3 text-[#006a71]">
                Important Information
              </h3>
              <div className="grid sm:grid-cols-2 gap-5">
                {[
                  "Your dispute will be reviewed by our admin team within 24-48 hours",
                  "Please provide as much detail and evidence as possible",
                  "You will receive email updates about your dispute status",
                  "Both parties will have the opportunity to respond",
                ].map((text, idx) => (
                  <div key={idx} className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-gradient-to-r from-[#006a71] to-[#ff7e67] rounded-full mt-2 flex-shrink-0"></div>
                    <p className="fs-14 !font-fw500 text-gray-700">{text}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}