---
const {args} = Astro.props;
---

{(args && args.length) ? (
    <h3>Arguments</h3>
    <table class="arguments">
        <tbody>
            {args.map(arg=>(
                <tr class="argument">
                    <th>
                        <strong>{arg.name}</strong>
                        <br/>
                        <span>
                            {!arg.is_required && (
                                "optional "
                            )}
                            {arg.type}
                        </span>
                    </th>
                    <th>
                        <span>{arg.description}</span>
                    </th>
                </tr>
        ))}
        </tbody>
    </table>
) : ''}
<style>
    .arguments {
            border: 1px solid var(--tertiary-background);
        }

        .arguments .left, .arguments .right {
            display: flex;
            flex-direction: column;
        }

        .arguments .argument {
            background-color: var(--tertiary-background);
            border-bottom: 1px solid var(--tertiary-background);
        }

        .arguments .argument th {
            text-align: left;
            padding: 0.25rem 1rem;
        }

        .arguments .argument span {
            text-align: left;
            font-weight: normal;
        }

        .arguments .argument .left, .arguments .argument .right {
            padding: 0.5rem 1rem;
        }

        .arguments .argument:nth-child(2n) {
            background-color: var(--secondary-background);
        }
</style>