import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CreateVideoInternals } from 'create-video';
import { IconForTemplate } from './IconForTemplate';
import { MoreTemplatesButton } from './MoreTemplatesButton';
import { TemplateIcon } from './TemplateIcon';
export const ChooseTemplate = () => {
    return (_jsx("div", { style: {
            display: 'flex',
            flexDirection: 'column',
        }, children: _jsx("div", { style: {
                position: 'relative',
                textAlign: 'center',
            }, children: _jsxs("div", { className: "no-scroll-bar", style: {
                    display: 'inline-flex',
                    flexDirection: 'row',
                    justifyContent: 'space-around',
                    borderRadius: 50,
                    alignItems: 'center',
                    padding: 8,
                    width: '100%',
                    maxWidth: '550px',
                }, children: [CreateVideoInternals.FEATURED_TEMPLATES.filter((f) => f.featuredOnHomePage).map((template) => {
                        return (_jsx("a", { className: "text-inherit no-underline", href: `/templates/${template.cliId}`, children: _jsx(TemplateIcon, { label: template.featuredOnHomePage, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
                    }), _jsx(MoreTemplatesButton, {})] }) }) }));
};
