import React from 'react';
import { createComponent } from '@lit/react';
import { MdList as MdListWebComponent } from '@material/web/list/list';
import { MdListItem as MdListItemWebComponent } from '@material/web/list/list-item';

const MdList = createComponent({
	react: React,
	tagName: 'md-list',
	elementClass: MdListWebComponent,
});

type ListProps = {
	children: React.ReactNode;
}

export const List = (props: ListProps) => {
	const { children, ...rest } = props;

	return (
		<MdList {...rest}>
			{children}
		</MdList>
	);
}

const MdListItem = createComponent({
	react: React,
	tagName: 'md-list-item',
	elementClass: MdListItemWebComponent,
});

type ListItemProps = {
	children: React.ReactNode;
	className?: string;
	id?: string;
	ariaLabel?: string;
	disabled?: boolean;
	type?: 'text' | 'link' | 'button';
	href?: string;
	target?: '_blank' | '_self' | '_parent' | '_top';
}

export const ListItem = (props: ListItemProps) => {
	const { children, ...rest } = props;

	const type = props.type || 'text';

	return (
		<MdListItem {...rest} type={type}>
			{children}
		</MdListItem>
	)
}