import React, {FC} from "react";
import {FeaturedPresetProps, Preset} from "./FeaturedPreset";
import {PresetsGrid} from "./PresetsGrid";

export type PresetSection = {
    type: 'sectioned',
    sections: {
        title: string,
        presets: Preset[]
    }[]
}
export type PresetSectionsProps = {
    sectioned: PresetSection
}

export const PresetSections: FC<PresetSectionsProps> = ({sectioned: {sections}}) => {
    return <div className="grid grid-cols-1 gap-y-5">
        {sections.map((section, index) => (
            <div key={index} className="space-y-2">
                <h2 className="text-2x font-medium text-gray-700">{section.title}</h2>
                <PresetsGrid presets={section.presets}/>
            </div>
        ))}
    </div>
}