import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import s from "./Panel.module.css";

export type PanelVariant = "default" | "raised" | "sunken" | "flat" | "primary";
export type PanelPadding = "none" | "tight" | "default" | "loose";

// 排除原生 title（string） — 我们的 title 接受 ReactNode 用于卡顶标签栏。
export interface PanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
{
    variant?: PanelVariant;
    padding?: PanelPadding;
    /** 顶部标签栏（uppercase tracked label + 任意右侧操作元素）。 */
    title?: ReactNode;
    actions?: ReactNode;
    children?: ReactNode;
    style?: CSSProperties;
    className?: string;
}

const PAD_CLASS: Record<PanelPadding, string> = {
    none:    s.padNone,
    tight:   s.padTight,
    default: s.padDefault,
    loose:   s.padLoose,
};

const VARIANT_CLASS: Record<PanelVariant, string> = {
    default: "",
    raised:  s.raised,
    sunken:  s.sunken,
    flat:    s.flat,
    primary: s.primary,
};

export function Panel(props: PanelProps)
{
    const {
        variant = "default",
        padding = "default",
        title, actions, children,
        className, ...rest
    } = props;

    const cls = [ s.panel, VARIANT_CLASS[variant], PAD_CLASS[padding], className ]
        .filter(Boolean).join(" ");

    return (
        <div className={cls} {...rest}>
            {(title || actions) && (
                <div className={s.header}>
                    <div className={s.title}>{title}</div>
                    <div>{actions}</div>
                </div>
            )}
            {children}
        </div>
    );
}
