"use client";

import type { ReactNode } from "react";

type FixToTheEndProps = {
  children: ReactNode;
  className?: string;
};

export function FixToTheEnd({ children, className }: FixToTheEndProps) {
  return (
    <div
      style={{ paddingBottom: "calc(16px + var(--safe-bottom))" }}
      className={[
        "question-fix-to-end fixed inset-x-0 bottom-0 z-20 mx-auto w-full sm:max-w-[375px] bg-[#F5F5F5]/95 px-[17px] pt-3 backdrop-blur-md",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {children}
    </div>
  );
}