import React from 'react';
import Slider from '../components/slider';
import { HeaderProps } from './types';

const Header: React.FC<HeaderProps> = ({ media, title, description, small = false, showButton = false, buttonText = 'Get started', onButtonClick }) => {
  const header = ['header', small && 'header--small'].filter(Boolean).join(' ');

  return (
    <div className={header}>
      {/* VIDEO */}
      {media.type === 'video' && (
        <video className="header__video" autoPlay loop muted playsInline>
          <source src={media.src} data-src={media.src} type="video/mp4" data-wf-ignore="true" />
        </video>
      )}

      {/* IMAGE */}
      {media.type === 'image' && <img src={media.src} alt={media.alt} className="header__image" />}

      {/* SLIDER */}
      {media.type === 'slider' && (
        <div className="header__slider">
          <Slider images={media.images} mode={media.mode ?? 'auto'} path={media.path ?? '/images/header-slider'} />
        </div>
      )}

      <div className="header__container">
        <div className="header__content">
          <h1 className="header__title">{title}</h1>
          <p className="header__description">{description}</p>

          {showButton && (
            <button className="cta header__btn" onClick={onButtonClick}>
              {buttonText}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default Header;