Aspect Ratio

import React from 'react';
import { aspectRatioStyleKeys, getAspectRatioPadding } from '../lib/core';
import type { AspectRatioBaseProps } from '../lib/core';
import styles from './aspect-ratio.module.scss';

export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, AspectRatioBaseProps {}

const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(({ className = '', ratio = 1, children, style, ...props }, ref) => {
	const paddingTop = `${getAspectRatioPadding(ratio)}%`;

	return (
		<div ref={ref} data-slot="aspect-ratio" className={`${styles[aspectRatioStyleKeys.root]} ${className}`} style={{ ...style, paddingTop }} {...props}>
			<div className={styles[aspectRatioStyleKeys.content]}>{children}</div>
		</div>
	);
});
AspectRatio.displayName = 'AspectRatio';

export { AspectRatio };
export default AspectRatio;

@use '../../../styles/variables/colors' as *;

// AspectRatio 根容器：通过 padding-top 撑起高度
.root {
	position: relative;
	width: 100%;

	// Solid 使用伪元素撑开高度，避免根节点 padding 参与 max-width 盒模型计算。
	&[data-layout='solid'] {
		padding-top: 0 !important;

		&::before {
			display: block;
			width: 100%;
			padding-bottom: var(--tile-aspect-ratio-padding);
			content: '';
		}
	}
}

// 内容容器：绝对定位占满
.content {
	position: absolute;
	inset: 0;
}

export { AspectRatio, type AspectRatioProps } from './aspect-ratio';