/**
 * External dependencies
 */
import clsx from 'clsx';
import type { AlternativeId } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { Header } from './header';
import { Body } from './body';
import { Footer } from './footer';

export type SidebarProps = {
	readonly className?: string;
	readonly alternativeId: AlternativeId;
};

export const Sidebar = ( {
	className,
	alternativeId,
}: SidebarProps ): JSX.Element => (
	<div className={ clsx( [ 'nab-css-editor-sidebar', className ] ) }>
		<Header />
		<Body alternativeId={ alternativeId } />
		<Footer />
	</div>
);
