use core::{
	color::ColorRole,
	typography::{
		self,
		typescale::{TypescaleModifier, TypescaleRoles},
		TypographyData, TypographyOpts,
	},
};
use web_sys::HtmlElement;
use yew::{function_component, virtual_dom::VNode, AttrValue, Html, Properties};

#[derive(Debug, Clone, PartialEq, Properties)]
pub struct TypographyProps {
	pub text: AttrValue,

	#[prop_or_default]
	pub role: TypescaleRoles,

	#[prop_or_default]
	pub modifier: TypescaleModifier,

	#[prop_or(ColorRole::Primary)]
	pub color: ColorRole,

	#[prop_or_default]
	pub opacity: Option<f32>,
}

#[function_component(Typography)]
pub fn typography(props: &TypographyProps) -> Html {
	let TypographyProps {
		text,
		role,
		modifier,
		color,
		opacity,
	} = props;

	let inner = TypographyData {
		text: text.to_string(),
	};

	let opts = TypographyOpts {
		role: *role,
		modifier: *modifier,
		color: *color,
		opacity: *opacity,
	};

	let typography: HtmlElement = typography::Typography::new(inner, opts);

	VNode::VRef(typography.into())
}