---
import StrapiBlockCustom from "./StrapiBlockCustom.astro";
import StrapiBlockTextItemComponent from "./items/StrapiBlockTextItem.astro";

import { StrapiBlockThemeDefault, getPropertyClass } from "../../lib";
import type {
    AstroComponent,
    StrapiBlockTextItem,
    StrapiBlockTheme,
} from "../../types";

type Props = {
    level: number;
    class?: string;
    data: Array<StrapiBlockTextItem>;
    block?: AstroComponent;
    theme: StrapiBlockTheme;
};

const {
    data,
    level = 2,
    class: classes = "",
    theme = StrapiBlockThemeDefault,
    block,
} = Astro.props;

const sanitizedData = data.filter(({ text }: StrapiBlockTextItem) => text);
const headingTag = `h${level}` as keyof StrapiBlockTheme["heading"];
const Tag = headingTag;

const blockClasses = classes ? classes.split(" ") : [];
const headingClasses = [
    ...blockClasses,
    ...getPropertyClass(theme, ["heading", headingTag]),
];
---

{
    sanitizedData.length && (
        <>
            {block && (
                <StrapiBlockCustom
                    {...Astro.props}
                    comp={block}
                    data={sanitizedData[0]}
                />
            )}
            {!block && (
                <Tag class={headingClasses.join(" ")}>
                    {sanitizedData.map((item: StrapiBlockTextItem) => {
                        if (typeof item === "string") {
                            return item;
                        }
                        return (
                            <StrapiBlockTextItemComponent
                                data={item}
                                theme={theme.heading.content || theme.paragraph || {}}
                            />
                        );
                    })}
                </Tag>
            )}
        </>
    )
}