import type { GenerateSettings } from "@editor/tools";
import type { AppStore } from "@editor/store";
import { GenerateControls } from "./bottom-controls/GenerateControls";

export type GenerateSheetProps = {
  settings: GenerateSettings;
  open: boolean;
  dispatch: AppStore["dispatch"];
};

export function GenerateSheet({ settings, open, dispatch }: GenerateSheetProps) {
  return (
    <aside
      aria-hidden={!open}
      aria-label="Generate settings"
      className={`pointer-events-auto absolute bottom-6 right-4 top-24 z-20 flex w-[28rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-[2.5rem] px-4 text-sm text-white backdrop-blur-xl transition-all duration-200 ${
        open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-8 opacity-0"
      }`}
    >
      {open ? (
        <div className="subtle-scrollbar min-h-0 flex-1 overflow-auto py-4">
          <GenerateControls settings={settings} dispatch={dispatch} />
        </div>
      ) : null}
    </aside>
  );
}