import "./index.scss";

import clsx from "clsx";

export function LinkedList({ children, className, ...other }: React.HTMLProps<HTMLUListElement>) {
	return (
		<ul className={clsx("ObLinkedList-root", className)} {...other}>
			{children}
		</ul>
	);
}

export function LinkedListItem({
	children,
	className,
	label,
	...other
}: React.HTMLProps<HTMLLIElement> & { label: React.ReactNode }) {
	return (
		<li className={clsx("ObLinkedList-item", className)} {...other}>
			{label && <div className="ObLinkedList-leftColumn">{label}</div>}
			<div className="ObLinkedList-line">
				<div className="ObLinkedList-bullet" />
			</div>
			<div className="ObLinkedList-rightColumn">{children}</div>
		</li>
	);
}

export function Card({ as, children, className, ...other }: React.HTMLProps<HTMLDivElement> & { as?: any }) {
	const Component = as || "div";

	return (
		<Component className={clsx("ObLinkedList-card", className)} {...other}>
			{children}
		</Component>
	);
}