import "./index.css";

import clsx from "clsx";

export type ColorCardProps = Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "children"> & {
	as?: "a" | "div" | "button" | "span" | "section" | "article";
	href?: string;
};

export function ColorCard({ as: Component, children, className, href, ...other }: ColorCardProps) {
	const BaseElement = Component ? Component : href ? "a" : "div";

	return (
		<BaseElement className={clsx("ObColorCard-root", className)} href={href} {...other}>
			{children}
		</BaseElement>
	);
}

export function CardStepList({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
	return (
		<div className={clsx("ObColorCard-stepList", className)} {...props}>
			{children}
		</div>
	);
}

export function CardStep({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
	return (
		<div className={clsx("ObColorCard-step", className)} {...props}>
			<div className="ObColorCard-stepText">{children}</div>
		</div>
	);
}

export function CardColumn({
	children,
	className,
	minor,
	...other
}: React.HTMLAttributes<HTMLDivElement> & { minor?: boolean }) {
	return (
		<div className={clsx("ObColorCard-column", minor && "ObColorCard-minor", className)} {...other}>
			{children}
		</div>
	);
}

export function CardDetail({
	children,
	className,
	label,
	primary,
	...other
}: React.HTMLAttributes<HTMLDivElement> & { label?: React.ReactNode; primary?: boolean }) {
	return (
		<div className={clsx("ObColorCard-detail", primary && "ObColorCard-primary", className)} {...other}>
			{label && <div className="ObColorCard-detailLabel">{label}</div>}
			<div className="ObColorCard-detailValue">{children}</div>
		</div>
	);
}

export function CardLabel({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>) {
	return (
		<div className={clsx("ObColorCard-label", className)} {...other}>
			{children}
		</div>
	);
}