---
import { Aside, Code } from '@astrojs/starlight/components';
import { getEntry, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import Flag from './Flag.astro';

const { path } = Astro.props;

const command = await getEntry('commands', path) as CollectionEntry<'commands'>;

const data = command?.data;

const usage = data?.usage;
const { Content } = await render(command);
---

{
  data?.experiment ? (
    <Aside type="tip" title={data?.experiment?.name}>
      The <code dir="auto">{data?.name}</code> command is experimental, usage requires the <a href={"/reference/experiments#"+data?.experiment?.control}><code dir="auto">--experiment {data?.experiment?.control}</code></a> flag.
    </Aside>
  ) : null
}

<h2 id="usage">Usage</h2>

{
  usage?.split('\n').map((line) => (
    <p>{line}</p>
  ))
}

{
  data?.examples ? (
  <h2 id="examples">Examples</h2>
  <div>
    {data?.examples.map((example) => (
      example && (
        <p>{example?.description}</p>
        <Code code={example?.code} lang="bash" />
      )
    ))}
  </div>
  ) : null
}

<Content />

{
  data?.flags ? (
  <h2 id="flags">Flags</h2>
  <div>
    {data?.flags.map((flagSlug) => (
      flagSlug && <Flag slug={flagSlug} />
    ))}
  </div>
  ) : null
}
