// Our fixed props
type Button {
  onClick: () => void;
}

// Our fixed components
const Button = (props) => {
  const { onClick } = props;

  return (
    <button onClick={onClick} className="button">
      {props.children}
    </button>
  );
};

// Usage
<Button onClick={alert('a link')}}>A link</Button>

// React Router https://api.reactrouter.com/v7/functions/react_router.Link.html
import { Link } from "react-router";

// 1 - This <Button> renders out as a <Link>
// 2 - We get strict type checking for our `to` prop, inherited from the Link component.
<Button as={Link} to={'/home'} >Go Home</Button> 

// Standard Button - renders out a <a>
<Button as='a' href='/home'>Go Home</Button> 

export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
  // If you make any changes to this interface, please make sure to update the
  // `OverridableComponent` type in `mui-types/index.d.ts` as well.
  // Also, there are types in Base UI that have a similar shape to this interface
  // (for example SelectType, OptionType, etc.).
  <RootComponent extends React.ElementType>(
    props: {
      /**
       * The component used for the root node.
       * Either a string to use a HTML element or a component.
       */
      component: RootComponent;
    } & OverrideProps<TypeMap, RootComponent>,
  ): React.JSX.Element | null;
  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
}

type ButtonImpl = OverridableComponent<ButtonTypeMap>;
type ButtonProps = OverrideProps<ButtonTypeMap, "button">;

const Button: ButtonImpl = (props: ButtonProps) => {
  const {
    component: Component = "button",
    ...rest
  } = props;

  return (
    <Component
      className={className}
      {...rest}
    />
  );
};

interface OverrideableComponent {
 // C is inferred from the value passed to `component`
  <C extends React.ElementType>(
    props: {
      component: C;
    } & React.ComponentPropsWithRef<C>
  ): React.JSX.Element | null;
}

// Example of an OverridableComponent type
const Example: OverrideableComponent = (props) => {
  const { component: Component, ...rest } = props;

  return <Component {...rest} />;
};

// Example component to demonstrate props usage
const TestComponentWithProps = ({
  abc,
}: {
  abc: string;
  children: React.ReactNode;
}) => {
  return <div>{abc}</div>;
};

// Example usage
const ExampleUsage = () => {
  return (
    // Strict types only here, abc is a string. abc={1} will fail.
    <Example component={TestComponentWithProps} abc="123">
      Hello, World!
    </Example>
  );
};

// 1 - Add OverridableTypeMap interface
// This allows components implementing our Overrideable patter to specify their own props, and also the type of the fallback to be used.
export interface OverridableTypeMap {
  // The props that the component accepts
  props: {};
  // The default component type that will be used if no `component` prop is provided
  defaultComponent: React.ElementType;
}

// 2 - BaseProps is a utility type that extracts the props from the OverridableTypeMap
export type BaseProps<M extends OverridableTypeMap> = M["props"];

// 3 - Remove properties `K` from `T`.
export type DistributiveOmit<T, K extends keyof any> = T extends any
  ? Omit<T, K>
  : never;

// Props if `component={Component}` is NOT used.
// We combined the "props" from our default, with the "props" from our component.
// This could for example combine the HTML props from our default fallback of a "button" element.
export type DefaultComponentProps<M extends OverridableTypeMap> = BaseProps<M> &
  DistributiveOmit<
    React.ComponentPropsWithRef<M["defaultComponent"]>,
    keyof BaseProps<M>
  >;

// Props of the component if `component={Component}` is used. 
// We combined the "props" out of our TypeMap, and the "props" from our component value, with duplicates/conflicts removed.
export type OverrideProps<
  M extends OverridableTypeMap,
  C extends React.ElementType,
> = BaseProps<M> &
  DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>;

// Updated OverrideProps
// This now includes our TypeMap type, and an interface for when no `component` prop is provided
interface OverrideableComponent<TypeMap extends OverridableTypeMap> {
  <RootComponent extends React.ElementType>(
    props: {
      component: RootComponent;
      // We cannot continue to use React.ComponentPropsWithRef here, it needs to be more specific so Typescript infers the correct interface.
    } & OverrideProps<TypeMap, RootComponent>
  ): React.JSX.Element | null;
  // New interface for when no `component` prop is provided
  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
}

// Updated component props.
type ExampleTypeMap = {
  props: {
    children?: React.ReactNode;
    component?: React.ElementType;
    one?: string;
  };
  defaultComponent: "button";
};

// Make use of our BaseProps utility. 
type ExampleProps = BaseProps<ExampleTypeMap>;

// Example of an OverridableComponent type
const Example: OverrideableComponent<ExampleTypeMap> = (
  props: ExampleProps
) => {
  const { component: Component = "button", one, ...rest } = props;

  return <Component {...rest} />;
};

// Example usage
const ExampleUsage = () => {
  return (
    // If "abc" was uncommented without "component", we would get the type error "Property 'abc' does not exist on type 'IntrinsicAttributes & { children?..." 
    <Example
      // component={TestComponentWithProps}
      // abc="123" 
      one="test"
      onClick={() => alert("abc")}
    >
      Hello, World!
    </Example>
  );
};