import "./about.module.css";
import "@/styles/quill.snow.css";

import React from "react";

import Card from "@/components/ui/card/card";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import ContentHtmlSection from "@/components/widget/content/content-html-section";
import {
  type Result,
  useGetUsetSettingsQuery,
} from "@/services/eva-panel/get-user-settings/get-user-settings";

export default function About() {
  const getUserSettings = useGetUsetSettingsQuery();
  const getUserSettingsData = getUserSettings.data?.Result;

  const getDataByPropertyId = (data: Result[], name: string) => {
    return data?.find((item) => item?.PropertyName === name);
  };

  const aboutUs = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Hakkımızda Text",
  );
  const tursabData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Tursab Belge No",
  );

  if (!getUserSettings.isSuccess) {
    return (
      <div>
        <Skeleton className="h-[800px]" />
      </div>
    );
  }

  return (
    <Card className="w-full">
      <div className="html-render-area">
        <div className="ql-container ql-snow">
          <ContentHtmlSection
            className="ql-editor"
            data={aboutUs?.CulturedPropertyValue}
          />
        </div>
      </div>
      {tursabData?.PropertyValue && (
        <div className="border-t border-gray-300 py-4">
          <div className="flex flex-col gap-2">
            <p className="text-sm text-gray-700 md:text-base">
              TÜRSAB Belge No: {tursabData?.PropertyValue}
            </p>
          </div>
        </div>
      )}
    </Card>
  );
}