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

import styles from "./fixed-bottom-area.module.css";

export interface FixedBottomAreaProps {
  children: ReactNode;
  className?: string;
  background?: string;
  elevated?: boolean;
}

export function FixedBottomArea({
  children,
  className,
  background,
  elevated = false,
}: FixedBottomAreaProps) {
  const style = background
    ? ({
        "--fixed-bottom-background": background,
      } as CSSProperties)
    : undefined;

  return (
    <div
      className={[styles.area, className].filter(Boolean).join(" ")}
      data-elevated={elevated}
      style={style}
    >
      {children}
    </div>
  );
}
