import { FC, HTMLAttributes } from 'react';
import "./Ratio.css";

interface IRatio extends HTMLAttributes<HTMLDivElement> {
  width: number;
  height: number;
};

const Ratio: FC<IRatio> = ({
  width,
  height,
  children
}) => {
  return (
    <div className='Ratio' >
      <span className='Ratio_padding' style={{ paddingTop: `${(height / width) * 100}%` }} />
      <div className='Ratio_inner'>
        {children}
      </div>
    </div>
  )
}

export default Ratio;