import { usePage } from '@websolutespa/bom-mixer-hooks';
import { forwardRef } from 'react';
import styled from 'styled-components';
import { UIComponentWithRef, UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';

type Props = {
};

export type LayoutProps = UIStyledComponentProps<Props>;

export type LayoutComponent<C extends React.ElementType = 'div'> = UIComponentWithRef<C, Props>;

const StyledLayout = styled.div<LayoutProps>`
  ${props => getCssResponsive(props)}
`;

export const Layout: LayoutComponent = forwardRef(({
  children,
  as = 'div',
  ...props
}, ref) => {
  const page = usePage();
  return (
    <StyledLayout
      ref={ref} as={as} {...props}
      data-template={page.template}
      data-id={page.id}
    >{children}</StyledLayout>
  );
});

Layout.displayName = 'Layout';