import * as stylex from "@stylexjs/stylex";
import {
	type HTMLAttributes,
	type PropsWithChildren,
	createElement,
	memo,
} from "react";

import { borderRadius, color } from "./tokens.stylex";

export type CardProps = DivCardProps | LabelCardProps;

export interface DivCardProps extends PropsWithChildren {
	component?: "div" | undefined;
}

export interface LabelCardProps
	extends HTMLAttributes<HTMLLabelElement>,
		PropsWithChildren {
	component: "label";
}

const styles = stylex.create({
	card: {
		borderWidth: 1,
		borderColor: color.gray200,
		backgroundColor: color.gray700,

		borderRadius: borderRadius.sm,

		display: "flex",
	},
});

export default memo(function Card({ component, children, ...rest }: CardProps) {
	return createElement(
		component ?? "div",
		{
			...stylex.props(styles.card),
			...rest,
		},
		children,
	);
});