---
/**
 * Col Component
 *
 * Responsive grid column. Spans 1-12 columns out of 12-column grid.
 * Breakpoint props cascade: xs → md → lg
 *
 * @example
 * <Col xs={12} md={6} lg={4}>Full mobile, half tablet, third desktop</Col>
 * <Col xs={6}>Always half width</Col>
 */

import './Grid.css';
import type { HTMLAttributes } from 'astro/types';
import type { ColProps } from './types';

type Props = ColProps & HTMLAttributes<'div'>;

const { xs, md, lg, class: className, ...rest } = Astro.props;
---

<div
  class:list={['col', xs && `col-xs-${xs}`, md && `col-md-${md}`, lg && `col-lg-${lg}`, className]}
  {...rest}
>
  <slot />
</div>
