Raised panel

import * as React from "react";
import { cn } from "@/lib/utils";

type Padding = "none" | "sm" | "default" | "lg";

type RaisedPanelProps = React.ComponentProps<"div"> & {
  /** Adds a soft light behind the panel, lit from below. */
  glow?: boolean;
  /** Inner padding: none, 12px, 20px or 32px. */
  padding?: Padding;
  /** The element rendered for the panel. */
  as?: "div" | "section";
};

const PADDING: Record<Padding, string> = {
  none: "",
  sm: "p-3",
  default: "p-5",
  lg: "p-8",
};

/**
 * A raised surface for a hero visual: card fill, hairline border, a 1px top shine and the large shadow.
 * Pass glow to light it from below the way a hero frame is lit.
 */
export function RaisedPanel({
  glow = false,
  padding = "default",
  as: Tag = "div",
  className,
  children,
  ...props
}: RaisedPanelProps) {
  const panel = (
    <Tag
      data-slot="raised-panel"
      data-padding={padding}
      className={cn(
        "relative w-full overflow-hidden rounded-lg border bg-card text-card-foreground shadow-lg inset-shadow-highlight",
        PADDING[padding],
        className,
      )}
      {...props}
    >
      {children}
    </Tag>
  );

  if (!glow) return panel;

  return (
    <div data-slot="raised-panel-glow" className="relative isolate w-full">
      <div
        aria-hidden="true"
        className="glow-backdrop pointer-events-none absolute -inset-x-12 -top-8 -bottom-16 -z-10"
      />
      {panel}
    </div>
  );
}