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

export type PanelProps = HTMLAttributes<HTMLElement> & {
  /** HTML tag to render (defaults to section) */
  as?: "article" | "section" | "div" | "aside" | "main";
  children: ReactNode;
  /** Accessible label for screen readers */
  "aria-label"?: string;
  /** Reference to another element that describes this panel */
  "aria-describedby"?: string;
  /** Identifies this panel as a landmark region */
  role?: "region" | "article" | "complementary" | "main";
};

/**
 * Panel component for grouping related content with proper semantics.
 *
 * Renders a styled container with semantic HTML and accessibility support.
 * Use this to create visually distinct sections of your interface.
 *
 * @example
 * // Default section
 * <Panel>
 *   <h2>Section Title</h2>
 *   <p>Section content...</p>
 * </Panel>
 *
 * @example
 * // With accessibility
 * <Panel aria-label="Search results" role="region">
 *   {results}
 * </Panel>
 */
export function Panel({ as: Tag = "section", children, className = "", role, ...props }: PanelProps) {
  const { "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...restProps } = props;

  return (
    <Tag
      role={role}
      aria-label={ariaLabel}
      aria-describedby={ariaDescribedby}
      className={[
        "rounded-lg border border-border bg-surface/92 p-5 shadow-[0_16px_60px_rgba(0,0,0,0.22)]",
        "focus-within:ring-2 focus-within:ring-border focus-within:ring-offset-2 focus-within:ring-offset-bg",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...restProps}
    >
      {children}
    </Tag>
  );
}