import React, { type FC, type HTMLProps, type ReactNode } from 'react';
import { clsx } from 'clsx';
import { TitleTabLayout } from '../../components';
import { cn } from '../../utils/cn';

export const SettingLayout: FC<
	{ title?: ReactNode; action?: ReactNode; children?: ReactNode } & Omit<HTMLProps<HTMLDivElement>, 'title' | 'action'>
> = ({ title, children, className, action, ...props }) => {
	return (
		<TitleTabLayout title={title || '设置'} tabs={[]} className={cn('h-full', className)} action={action} {...props}>
			{children}
		</TitleTabLayout>
	);
	return (
		<div className={clsx('flex h-full w-full flex-col', className)} {...props}>
			<h3 className={'flex items-center gap-4 p-2 text-lg font-medium'}>
				{title}
				<div className={'flex-1'} />
				{action}
			</h3>
			<hr className={'border-color'} />
			<div className={'relative flex flex-1 flex-col flex-wrap gap-1 p-2'}>{children}</div>
		</div>
	);
};