---
import Icon from '../../components/icon/icon.astro';
import { features } from '../../data';
import type { Feature } from '../../types';

type Variant = 'grid' | 'column';

type Props = {
  variant: Variant;
};

const { variant = 'grid' }: Props = Astro.props;
---

<div>
  {variant === 'grid' && (
    <div class="row">
      {features &&
        features.map((item: Feature) => (
          <div class="col-md-4 mb-5 mb-md-0">
            <div class="text-center px-lg-3 btn-transition">
              <div class="svg-icon svg-icon-lg text-white mb-4">
                <Icon name={item.icon} />
              </div>
              <a id="features_internship" href={item.href}>
                <h3 class="text-white">{item.title}</h3>
                <p class="text-white" set:html={item.content} />
              </a>
            </div>
          </div>
        ))}
    </div>
  )}

  {variant === 'column' && (
    <div class="d-flex flex-column">
      {features &&
        features.map((item: Feature) => (
          <div class="d-flex align-items-start gap-3 btn-transition">
            <div class="svg-icon svg-icon-md text-white mb-4">
              <Icon name={item.icon} />
            </div>
            <a id="features_internship" href={item.href}>
                <h3 class="text-white">{item.title}</h3>
                <p class="text-white" set:html={item.content} />
            </a>
          </div>
        ))}
    </div>
  )}
</div>
