import { cJoin } from "helpers/className";

/*
 *                                        ╭─────────────╮
 * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
 */

interface Props {
  className?: string;
  children: React.ReactNode;
  id?: string;
}

// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

export const InsetBox = ({ id, className, children }: Props): JSX.Element => (
  <div
    id={id}
    className={cJoin(
      "w-full rounded-xl bg-mid p-8 shadow-inner-sm shadow-shade",
      className
    )}
  >
    {children}
  </div>
);