import React from 'react';
import { useStoreActions, useStoreState } from '../store/store.hooks';
import PlacementSelectFormat from './PlacementSelectFormat';
import TabsMenu from '../layout/TabsMenu';

interface Props {}

function PlacementSelectFormatContainer({}: Props) {
	const format = useStoreState((state) => state.placements.selectedFormat);
	const toggleFormat = useStoreActions((actions) => actions.placements.toggleFormat);
	const tabs = [
		{
			title: 'Format',
			key: 'format',
			tab: () => (
				<PlacementSelectFormat selectedFormat={format} onFormatChange={toggleFormat} />
			),
		},
	];

	return <TabsMenu tabs={tabs} variant={'mini'} />;
}

export default PlacementSelectFormatContainer;