---
import { Badge } from '@astrojs/starlight/components';
import Card from '@components/vendored/starlight/Card.astro';
import type { CollectionEntry } from 'astro:content';
import { render, getEntry } from 'astro:content';

interface Props {
  slug: string;
}

const { slug } = Astro.props;

const flagEntry = await getEntry('flags', slug) as CollectionEntry<'flags'>;
const { Content } = await render(flagEntry);
const { aliases, description, type, env, name, defaultVal } = flagEntry.data;
---

<section id={name}>
  <Card title={"--" + name} icon="custom:terragrunt">
    <p id={name}>{description}</p>
    <Content />
    <div>
      <span>Type: </span><Badge text={type} variant="note" style={{ fontWeight: 'bold' }}/>
    </div>
    {defaultVal && (
      <div>
        <span>Default: </span><Badge text={defaultVal} variant="tip" style={{ fontWeight: 'bold' }}/>
      </div>
    )}
    {aliases && aliases.length > 0 && (
      <>
        <p>Aliases:</p>
        <ul>
          {aliases.map((alias: string) => (
            <li><code dir="auto">{alias}</code></li>
          ))}
        </ul>
      </>
    )}
    {env && (
      <>
        <p>Environment Variables:</p>
        <ul>
          {env.map((envVar: string) => (
            <li><code dir="auto">{envVar}</code></li>
          ))}
        </ul>
      </>
    )}
  </Card>
</section>
