---
export interface Props {
  title: string;
  bigTech: string;
  alternatives: Array<{ name: string; description: string; url: string }>;
  bgClass: string;
}

const { title, bigTech, alternatives, bgClass } = Astro.props;
---

<div class={`border rounded-lg p-6 shadow-md ${bgClass} text-gray-900`}>
  <h2 class="text-2xl font-semibold mb-4">{title}</h2>
  <p class="text-base mb-4"><span class="line-through">Big Tech Option: {bigTech}</span></p>
  <ul class="space-y-4">
    {alternatives.map(alt => (
      <li>
        <h3 class="text-lg font-bold underline">{alt.name}</h3>
        <p>{alt.description}</p>
        <a href={alt.url} class="text-blue-500 hover:text-blue-700">Website</a>
      </li>
    ))}
  </ul>
</div>