'use no memo'; // forwarded composition props invalidate the generated wrapper caches

import type { HTMLAttributes, Ref } from 'react';

import { clsx } from 'clsx';

import * as css from './PostLayout.css';

/**
 * shared structural layout kit for post surfaces (feed, linear/tree thread, focused anchor). these are
 * children-based primitives that hold no post data and own no spacing of their own. consume as `import * as
 * PostLayout from '#/components/PostLayout'`.
 */

type DivProps = HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };

export interface FrameProps extends DivProps {
	/** Whole-row hover tint. The focused anchor omits it. */
	hoverable?: boolean;
	/** Extra top room when the post is the thread root. */
	rootPad?: boolean;
	/** Hairline separating this post from the one above. */
	topBorder?: boolean;
}

/**
 * outer clickable post row that forwards `className`, `ref`, and other props.
 *
 * @param props props forwarded to the outer div
 */
export function Frame({ children, className, hoverable, rootPad, topBorder, ...rest }: FrameProps) {
	return (
		<div className={clsx(css.frame({ hoverable, rootPad, topBorder }), className)} {...rest}>
			{children}
		</div>
	);
}

/** The avatar + content columns side by side. */
export function Row({ children, className, ...rest }: DivProps) {
	return (
		<div className={clsx(css.row, className)} {...rest}>
			{children}
		</div>
	);
}

/** The avatar column; holds the avatar plus any reply-spine above/below it. */
export function AvatarColumn({ children, className, ...rest }: DivProps) {
	return (
		<div className={clsx(css.avatarColumn, className)} {...rest}>
			{children}
		</div>
	);
}

/** The flex-1 content column beside the avatar. */
export function ContentColumn({ children, className, ...rest }: DivProps) {
	return (
		<div className={clsx(css.content, className)} {...rest}>
			{children}
		</div>
	);
}

/** A reply-spine line. Pass a `className` for the surrounding margin. */
export function Spine({ className, ...rest }: Omit<DivProps, 'children'>) {
	return <div className={clsx(css.spine, className)} {...rest} />;
}