---
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';
import { isFlagVisible } from '@lib/flags';

interface Props {
  slug: string;
}

const { slug } = Astro.props;

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

{visible && (
  <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>
)}
