"use client";
import type { Children } from "@/core/types/common";
import useScreen from "@/core/utils/hooks/useScreen";
import usePattern from "@/app/(visualization)/project/@modals/(.)customization/_utils/hooks/usePattern";

import type { JSX } from "react";

interface SecondarySectionProps extends Children {}

/**
 * The wrapper for display the **right-side** UI components of the **customization** modal window.
 * Currently, it is available only for the tile patterns view.
 * @param {Readonly<SecondarySectionProps>} props
 * @return {JSX.Element}
 */
export default function SecondarySection(props: Readonly<SecondarySectionProps>): JSX.Element {
  const pattern = usePattern();
  const { screenHeight } = useScreen();

  /**
   * ?DEPRECATED: currently there no any UI components which needs this section.
   */

  return (
    <div
      className={`
        ${/*!pattern ? "hidden" : ""*/"hidden"} 
        flex-1 min-w-[280px] min-h-[596px] max-h-[740px] flex flex-col gap-5 
        ${screenHeight < 960 ? "!max-h-[544px] !min-h-[496px]" : ""}
        ${screenHeight < 860 ? "!max-h-[444px] !min-h-[396px]" : ""}
      `}
    >
      {props.children}
    </div>
  );
}