---
/**
 * Renders the data attributes table for API reference.
 */
import Table from '@/components/typography/Table.astro';
import Tbody from '@/components/typography/Tbody.astro';
import Th from '@/components/typography/Th.astro';
import Thead from '@/components/typography/Thead.astro';
import Tr from '@/components/typography/Tr.astro';
import type { DataAttrDef } from '@/types/component-reference';
import DataAttrRow from './DataAttrRow.astro';

interface Props {
  dataAttributes: Record<string, DataAttrDef>;
  componentName: string;
}

const { dataAttributes, componentName } = Astro.props;

const attrs = Object.entries(dataAttributes);
---

<Table maxWidth={false} outerClass="my-6">
    <Thead>
        <Tr>
            <Th>Attribute</Th>
            <Th>Type</Th>
            <Th />
        </Tr>
    </Thead>
    <Tbody>
        {
            attrs.map(([name, def]) => (
                <DataAttrRow
                    name={name}
                    type={def.type}
                    detailedType={def.detailedType}
                    description={def.description}
                    componentName={componentName}
                />
            ))
        }
    </Tbody>
</Table>