---
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}-attr-${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">
    {type ? <MarkdownCode>{type}</MarkdownCode> : null}
  </Td>
</DetailRow>
