import type { ReactNode } from 'react';
import { MinimalLayout } from '../layouts/MinimalLayout';

export interface LandingTemplateProps {
  hero: ReactNode;
  highlights: ReactNode[];
  background?: 'light' | 'dark';
}

export function LandingTemplate({ hero, highlights, background }: LandingTemplateProps) {
  return (
    <MinimalLayout background={background}>
      <div className="shared-landing">
        <div className="shared-landing__hero">{hero}</div>
        <div className="shared-landing__highlights">
          {highlights.map((highlight, index) => (
            // eslint-disable-next-line react/no-array-index-key
            <div key={index}>{highlight}</div>
          ))}
        </div>
      </div>
    </MinimalLayout>
  );
}