import * as stylex from "@stylexjs/stylex";
import { memo } from "react";

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

const styles = stylex.create({
	hr: {
		borderStyle: "none",
		borderTopWidth: "1px",
		borderTopStyle: "solid",
		borderTopColor: color.gray400,
		margin: `${size.px4} 0`,
	},

	hrCompact: {
		borderStyle: "none",
		borderTopWidth: "1px",
		borderTopStyle: "solid",
		borderTopColor: color.gray400,
		margin: 0,
	},

	labelled: {
		color: color.gray100,
		display: "flex",

		"::before": {
			content: '""',
			flex: "1 1",
			borderBottomWidth: "1px",
			borderBottomStyle: "solid",
			margin: "auto",
			marginRight: size.rem2,
		},
		"::after": {
			content: '""',
			flex: "1 1",
			borderBottomWidth: "1px",
			borderBottomStyle: "solid",
			margin: "auto",
			marginLeft: size.rem2,
		},
	},

	labelledCompact: {
		color: color.gray100,
		display: "flex",

		"::before": {
			content: '""',
			flex: "1 1",
			borderBottomWidth: "1px",
			borderBottomStyle: "solid",
			margin: "auto",
			marginRight: size.px4,
		},
		"::after": {
			content: '""',
			flex: "1 1",
			borderBottomWidth: "1px",
			borderBottomStyle: "solid",
			margin: "auto",
			marginLeft: size.px4,
		},
	},

	muted: {
		color: color.gray400,
	},

	small: {
		fontWeight: 400,
		fontSize: fontSize.sub,
	},
	medium: {
		fontWeight: 500,
	},
	large: {
		fontWeight: 400,
		fontSize: fontSize.h4,
	},
});

export interface DividerProps {
	label?: string;
	size?: "small" | "medium" | "large";
	muted?: boolean;
	compact?: boolean;
}

export default memo(Divider);

function Divider({ label, size, muted, compact }: DividerProps) {
	return label ? (
		<div
			{...stylex.props(
				compact ? styles.labelledCompact : styles.labelled,
				styles[size ?? "medium"],
				muted && styles.muted,
			)}
		>
			{label}
		</div>
	) : (
		<hr {...stylex.props(compact ? styles.hrCompact : styles.hr)} />
	);
}