import * as React from "react";

export interface BannerProps {
  title: string;
  heading: string;
  image: string;
}

// Don't declare return type manually
export function Banner({ title, heading, image }: BannerProps) {
  return (
    <div
      style={{
        textAlign: "center",
        padding: "2rem",
        backgroundColor: "#f9f9f9",
        borderRadius: "8px",
        boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
        maxWidth: "960px",
        margin: "0 auto",
      }}
    >
      <img
        src={image}
        alt={heading}
        style={{
          maxWidth: "100%",
          height: "auto",
          borderRadius: "6px",
        }}
      />
      <h1
        style={{
          fontSize: "2rem",
          fontWeight: 700,
          marginTop: "1.5rem",
          color: "#1e3a8a",
          lineHeight: 1.2,
        }}
      >
        {heading}
      </h1>
      <p
        style={{
          fontSize: "1.125rem",
          marginTop: "0.5rem",
          color: "#4b5563",
        }}
      >
        {title}
      </p>
    </div>
  );
}