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

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

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

const id = `${componentName}-css-var-${name.replace(/^--/, '')}`;
---

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