import Link from 'next/link';
import styles from './HeroBanner.module.css';

export default function HeroBanner({ title, pageName, bgImage }) {
  const currentPathName = pageName || title;

  return (
    <section 
      className={styles.hero}
      style={{ backgroundImage: bgImage ? `url(${bgImage})` : 'none' }}
    >
      <div className={styles.overlay} />
      <div className={styles.content}>
        <h1 className={styles.title}>{title}</h1>
        <div className={styles.breadcrumb}>
          <Link href="/">Home</Link>
          <span className={styles.separator}>/</span>
          <span>{currentPathName}</span>
        </div>
      </div>
    </section>
  );
}
