import { styled } from '../Theme';

export interface AspectRatioContainerProps {
  aspect: number;
  children: React.ReactNode;
}

function AspectRatioContainer({ aspect, children, ...rest }: AspectRatioContainerProps) {
  return (
    <Root aspect={aspect} {...rest}>
      <span className="aspect-ratio-container__inner">{children}</span>
    </Root>
  );
}

type RootProps = {
  aspect: number;
};

const Root = styled('span')<RootProps>`
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: ${({ aspect }) => (1 / aspect) * 100}%;

  .aspect-ratio-container__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
`;

export default AspectRatioContainer;
