---
import { Aside, Badge, Icon } from "@astrojs/starlight/components";
import AnchorHeading from "@astrojs/starlight/components/AnchorHeading.astro";
import { render, renderInline, highlight } from "@/lib/markdown";
import type { VocabWord } from "@/types/types";

const { word } = Astro.props as { word: VocabWord };
const activeTag = Astro.params.tag;

const gender_lookup: Record<"m" | "f", ["note" | "tip", string]> = {
    m: ["note", "masculine"],
    f: ["tip", "feminine"],
};
---

<li id={word.hindi} class="word-entry">
    <AnchorHeading
        level="4"
        id={word.hindi}
        class="word-heading"
        style="font-weight: normal;"
    >
        {word.hindi}
        <Icon name="right-arrow" class="icon-inline" /><span
            >{word.english}</span
        >
        {
            word.gender && (
                <Badge
                    variant={gender_lookup[word.gender][0]}
                    text={gender_lookup[word.gender][1]}
                    class="gender-badge"
                />
            )
        }
    </AnchorHeading>
    {word.note && <div set:html={render(word.note)} />}
    {
        word.examples && (
            <>
                <p>For example,</p>
                <ol>
                    {word.examples.map((e) => (
                        <li class="word-examples">
                            <p>
                                <span
                                    set:html={highlight(e.hindi, word.hindi)}
                                />{" "}
                                <Icon name="right-arrow" class="icon-inline" />{" "}
                                <span
                                    set:html={highlight(
                                        e.english,
                                        word.english,
                                    )}
                                />
                            </p>
                            {e.note && (
                                <Aside type="note" title="Note">
                                    <p
                                        set:html={highlight(e.note, word.hindi)}
                                    />
                                </Aside>
                            )}
                        </li>
                    ))}
                </ol>
            </>
        )
    }
    {
        word.seeAlso && (
            <p>
                <b>See also:</b>
                {word.seeAlso.map((ref, i) => (
                    <>
                        <span set:html={renderInline(ref.reference ?? "")} />{i < word.seeAlso!.length - 1 ? "; " : ""}
                    </>
                ))}
            </p>
        )
    }
    {
        word.tags && (
            <p>
                {word.tags.filter((tag) => (
                    !activeTag || tag.name !== activeTag
                )).map((tag, i) => (
                    <>
                        <Badge text={tag.name} class="tag-badge" />
                        {i < word.tags!.length - 1 ? " " : ""}
                    </>
                ))}
            </p>
        )
    }
</li>
