import React from "react";
import { cn } from "tailwind-variants";
import type { CommonProps } from "@/common/CommonProps";

// 别名<约束>=值
// 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导
type AsProp<C extends React.ElementType> = { as?: C };

type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);

export type PolymorphicProps<C extends React.ElementType, P = {}> = (P &
  AsProp<C>) &
  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, P>>;

interface BoxProps<C extends React.ElementType> extends CommonProps {
  as?: C;
}

const Box = <C extends React.ElementType = "div">(
  props: PolymorphicProps<C, BoxProps<C>>,
  ref?: React.ComponentPropsWithRef<C>["ref"],
) => {
  const { as: Component = "div", children, className, ...rest } = props;


  const boxRootClass = cn( className);

  return (
    <Component ref={ref} className={boxRootClass} {...(rest as any)}>
      {children}
    </Component>
  );
};

export type BoxComponent = <C extends React.ElementType = "div">(
  props: PolymorphicProps<C, BoxProps<C>> & {
    ref?: React.ComponentPropsWithRef<C>["ref"];
  },
) => React.ReactElement | null;

export default Box as BoxComponent;