import classNames from "classnames";
import React from "react";

export type Props = {
  /**
   * The style of component
   */
  className?: string;
  /**
   * The optional child
   */
  children?: React.ReactNode;
};
const AspectRatio = ({ className, children }: Props) => {
  return (
    <div
      className={classNames(
        "relative overflow-hidden pt-[55%] rounded w-full",
        className
      )}
    >
      {children}
    </div>
  );
};

AspectRatio.Content = function AspectRatioContent({
  className,
  children,
}: Props) {
  return (
    <div className={classNames([className, "absolute top-0 w-full h-full"])}>
      {children}
    </div>
  );
};

export default AspectRatio;