import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button } from '@remotion/design';
import { CreateVideoInternals } from 'create-video';
import { IconForTemplate } from './homepage/IconForTemplate';
import { EditorIcon } from './icons/editor';
import { SkiaIcon } from './icons/skia';
import { TimelineIcon } from './icons/timeline';
const Item = ({ children, label, description }) => {
    return (_jsxs("div", { className: "h-full w-full flex-1", children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: "flex mr-2.5 h-[30px] w-[30px] justify-center items-center", children: children }), _jsx("div", { className: "font-bold", children: label })] }), _jsx("div", { children: _jsx("p", { 
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML: {
                        __html: description,
                    }, className: "text-sm mt-2.5 text-gray-500 dark:text-gray-200 mb-2.5" }) })] }));
};
export const Templates = () => {
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "max-w-[1000px] mx-auto px-5 bg-[var(--background)]", children: [_jsxs("h1", { className: "text-4xl  md:text-7xl lg:text-8xl font-black leading-none mt-[75px] text-center mb-10", children: ["Find the right", _jsx("br", {}), "template"] }), _jsx("p", { className: "text-center mb-[50px] font-brand", children: "Jumpstart your project with a template that fits your usecase." }), _jsx("h3", { children: "Free templates" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]", children: CreateVideoInternals.FEATURED_TEMPLATES.map((template) => {
                            return (_jsx(Button, { href: `/templates/${template.cliId}`, depth: 0.5, className: "justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: template.homePageLabel, description: template.description, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
                        }) }), _jsx("br", {}), _jsx("br", {}), _jsx("h3", { children: "Paid templates" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[15px]", children: [_jsx(Button, { href: "https://www.remotion.pro/editor-starter", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: 'Editor Starter', description: 'A boilerplate for starting your own video editor', children: _jsx(EditorIcon, { style: {
                                            height: 0.7 * 32,
                                            overflow: 'visible',
                                        } }) }) }), _jsx(Button, { href: "https://www.remotion.pro/watercolor-map", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: 'Watercolor Map', description: 'A beautiful 2D map for travel videos', children: _jsx(SkiaIcon, { style: {
                                            height: 0.7 * 32,
                                            overflow: 'visible',
                                        } }) }) }), _jsx(Button, { href: "https://www.remotion.pro/timeline", depth: 0.5, className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] h-full w-full items-start", children: _jsx(Item, { label: '<Timeline />', description: 'A copy pasteable component for timeline-based editing', children: _jsx(TimelineIcon, { style: {
                                            height: 0.7 * 32,
                                        } }) }) })] }), _jsx("br", {}), _jsxs("p", { className: "text-center text-gray-500 font-brand text-sm", children: ["Couldn't", " find what you need? Find more in the list of", ' ', _jsx("a", { href: '/docs/resources', children: "Resources" }), "."] })] }), _jsx("br", {})] }));
};
