import type { FeatureCard } from "../content/types";

interface OverviewGridProps {
  features: FeatureCard[];
}

export function OverviewGrid({ features }: OverviewGridProps) {
  return (
    <div className="card-grid">
      {features.map((feature) => (
        <article key={feature.title} className="feature-card">
          <div className="feature-head">
            <h3>{feature.title}</h3>
            <span className={`status-badge ${feature.status.replace(" ", "-")}`}>{feature.status}</span>
          </div>
          <p>{feature.summary}</p>
          <dl>
            <div>
              <dt>Intended user</dt>
              <dd>{feature.intendedUser}</dd>
            </div>
            <div>
              <dt>Route target</dt>
              <dd>{feature.routeTargetSummary}</dd>
            </div>
          </dl>
        </article>
      ))}
    </div>
  );
}