---
import { api } from "../api/dynamic";
import { tools } from "../constants/tools";
import { Heading } from "./Heading";
import HomeSection from "./HomeSection.astro";
import ToolCard from "./ToolCard.astro";
import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";

interface Props {
  locale: string;
}

const { locale } = Astro.props;

const strings = await api.strings(locale);
---

<HomeSection>
  <Heading size="2" className="title">{strings.home.games}</Heading>

  <ToolCardLayoutRoot>
    <ToolCardLayoutColumn major>
      <ToolCard {locale} tool={tools.mixer} />
    </ToolCardLayoutColumn>

    <ToolCardLayoutColumn>
      <ToolCard {locale} tool={tools.guesser} />
    </ToolCardLayoutColumn>
  </ToolCardLayoutRoot>
</HomeSection>