import React, { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
import { cn } from '../utils/cn';

export type LeftCenterRightLayoutProps<E extends ElementType = 'div'> = ComponentPropsWithRef<E> & {
	as?: E;
	left?: ReactNode;
	center?: ReactNode;
	right?: ReactNode;
};
export const LeftCenterRightLayout = <E extends ElementType = 'div'>({
	as: As = 'div',
	left,
	center,
	right,
	className,
	children,
	ref,
	...props
}: LeftCenterRightLayoutProps<E>) => {
	return (
		<As className={cn('flex items-center', className)} ref={ref} {...props}>
			{left}
			<div className={'relative flex h-full flex-1'}>
				<div className={'absolute inset-0 flex flex-wrap items-center overflow-x-auto'}>
					{center}
					{children}
				</div>
			</div>
			{right}
		</As>
	);
};