import { getClassNames } from '@websolutespa/bom-core';
import { ComponentPropsWithRef, forwardRef } from 'react';
import styled from 'styled-components';
import { UIComponentWithRef } from '../types';
import { getCssResponsive } from '../utils';

type Props = {
};

export type MainComponent<C extends React.ElementType = 'main'> = UIComponentWithRef<C, Props>;

const Wrapper = styled.main`
  ${props => getCssResponsive(props)}
`;

export const Main: MainComponent = forwardRef<HTMLDivElement, MainProps>(({
  className,
  children,
  ...props
}, ref) => {
  const classNames = getClassNames('main', className);
  return (
    <Wrapper ref={ref} className={classNames} role="main" {...props}>
      {children}
    </Wrapper>
  );
});

Main.displayName = 'Main';

export type MainProps = ComponentPropsWithRef<typeof Main>;

