---
import MarkdownCode from '@/components/typography/MarkdownCode.astro';
import Td from '@/components/typography/Td.astro';
import DetailRow from './DetailRow.astro';

interface Props {
  name: string;
  type: string;
  detailedType?: string;
  description?: string;
  componentName: string;
}

const { name, type, detailedType, description, componentName } = Astro.props;

const id = `${componentName}-state-${name}`;
---

<DetailRow id={id} name={name} type={type} detailedType={detailedType} description={description} colspan={3}>
    <Td class="align-top">
        <MarkdownCode>{name}</MarkdownCode>
    </Td>
    <Td class="align-top">
        <MarkdownCode>{type}</MarkdownCode>
    </Td>
</DetailRow>