import type { CSSProperties, ReactNode } from "react";
import clsx from "clsx";

import Motion from "@/components/motion";

import styles from "./styles.module.scss";

interface ContainerProps {
  hidden?: boolean;
  textAlign?: string | CSSProperties["textAlign"];
  className?: string;
  style?: CSSProperties;
  children: ReactNode;
}

export default function Container({
  hidden = false,
  textAlign = "left",
  className,
  children,
  ...props
}: ContainerProps) {
  return (
    <Motion
      className={clsx(styles.container, className)}
      style={{
        display: hidden ? "none" : "block",
        textAlign: textAlign as React.CSSProperties["textAlign"],
      }}
      triggerOnce
      {...props}
    >
      {children}
    </Motion>
  );
}