---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import PageHeader from '../../../components/PageHeader.astro';
import ArticleSection from '../../../components/ArticleSection.astro';
import DocsFooter from '../../../components/DocsFooter.astro';
import { getDict, type Lang } from '../../../i18n';

export function getStaticPaths() {
  return [{ params: { lang: 'zh' } }, { params: { lang: 'en' } }];
}

const lang = Astro.params.lang as Lang;
const t = getDict(lang);
const d = t.docs.input_tools;
---
<BaseLayout lang={lang} title={d.title} description={d.lead} path="/docs/input-tools">
  <PageHeader eyebrow={d.eyebrow} title={d.title} lead={d.lead} />

  <article class="container-wide pb-24">
    <p class="text-[15.5px] leading-[1.75]" style="color: var(--fg);">{d.body}</p>

    <ArticleSection tag={d.tools_tag} title={d.tools_heading}>
      <div class="rounded-xl overflow-hidden" style="border: 1px solid var(--border); background: var(--bg-elev);">
        <table class="w-full text-[13.5px]">
          <tbody>
            {d.tools.map((o, i) => (
              <tr class={i > 0 ? 'border-t' : ''} style="border-color: var(--border);">
                <td class="px-4 py-3 font-medium whitespace-nowrap align-top" style="color: var(--fg);">{o.name}</td>
                <td class="px-4 py-3 align-top" style="color: var(--fg-muted);">{o.desc}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </ArticleSection>

    <DocsFooter lang={lang} slug="input-tools" />
  </article>
</BaseLayout>
