import React from "react";

import { StyleSheetType } from "../services/StyleSheet";
import getStyleAndDataIdAttributes from "./getStyleAndDataIdAttributes";

type StyleableProps = {
  children?: React.ReactNode;
  style?: StyleSheetType;
};

const styledComponent = <Props extends StyleableProps>(
  Component: React.ComponentType<any>
) =>
  React.forwardRef<typeof Component, Props>(
    ({ style, ...props }: Props, forwardedRef) => (
      <Component
        ref={forwardedRef}
        {...getStyleAndDataIdAttributes(style)}
        {...props}
      />
    )
  );

export default styledComponent;