use dioxus::prelude::*;

use crate::cn;

#[component]
pub fn AspectRatio(#[props(default = default_ratio())] ratio: f64, #[props(default)] class: String, children: Element) -> Element {
	let cls = cn!(class);
	let style = format!("aspect-ratio: {ratio};");
	rsx! {
		div { class: cls, style, "data-slot": "aspect-ratio", {children} }
	}
}
fn default_ratio() -> f64 {
	1.0
}

#[cfg(test)]
mod tests {
	use super::*;
	use crate::uikit::test_util::render;

	#[test]
	fn default_ratio_is_one() {
		fn app() -> Element {
			rsx! {
				AspectRatio { "x" }
			}
		}
		let html = render(app);
		assert!(html.contains("data-slot=\"aspect-ratio\""), "{html}");
		assert!(html.contains("aspect-ratio: 1"), "{html}");
		assert!(html.contains("x"));
	}

	#[test]
	fn custom_ratio_applied() {
		fn app() -> Element {
			rsx! {
				AspectRatio { ratio: 1.5, "y" }
			}
		}
		let html = render(app);
		assert!(html.contains("aspect-ratio: 1.5"), "{html}");
	}
}
