import type { PropsWithChildren } from "react";
import { useMediaQuery } from "usehooks-ts";

import RezervationSummaryDrawer from "@/components/widget/reservation-summary-drawer/reservation-summary-drawer";

interface CoreSummarySideColumnProps extends PropsWithChildren {
  price?: any;
  button?: any;
  children: string | JSX.Element | JSX.Element[];
}

const CoreSummarySideColumn = (props: CoreSummarySideColumnProps) => {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  if (!isDesktop) {
    return (
      <RezervationSummaryDrawer price={props.price} button={props.button}>
        {props.children}
      </RezervationSummaryDrawer>
    );
  }

  return (
    <div className="shrink-0 basis-[336px]">
      <div className="sticky top-2">{props.children}</div>
    </div>
  );
};

export default CoreSummarySideColumn;