import type { ReactNode } from "react";

const BORDERS = {
  gold: "from-gold via-gold-dim to-gold",
  danger: "from-heart via-heart-empty to-heart",
};

/**
 * The cut-corner frame used everywhere — an "inventory slot".
 * Two layers share the same `chamfer` shape: the outer one is the 1px
 * gradient border, the inner one is the dark fill.
 *
 *   className       → outer element (sizing, corner size via [--cut:…])
 *   innerClassName  → inner element (padding, layout of the contents)
 */
export function Slot({ children, className = "", innerClassName = "px-[18px] py-4", tone = "gold", as: Tag = "div" }: {
  children: ReactNode;
  className?: string;
  innerClassName?: string;
  tone?: keyof typeof BORDERS;
  as?: "div" | "section" | "li";
}) {
  return (
    <Tag className={`chamfer bg-linear-160 p-px ${BORDERS[tone]} ${className}`}>
      <div className={`chamfer h-full bg-panel ${innerClassName}`}>{children}</div>
    </Tag>
  );
}