src/components/Header.tsx

import React from 'react'

type Props = {
  compact?: boolean
}

export function Header({ compact = false }: Props) {
  const heightClass = compact ? 'h-16 md:h-20 lg:h-20' : 'h-24 md:h-28 lg:h-32'

  return (
    <header className={`relative w-full ${heightClass} overflow-hidden`}>
      {/* Background image */}
      <img
        src="/banner.jpeg"
        alt="Header background"
        className="absolute inset-0 w-full h-full object-cover"
      />

      {/* Content */}
      <div className="relative z-10 h-full flex items-center px-3 md:px-6">
        {/* Logo */}
        <img
          src="/white_logo.png"
          alt="Manalife logo"
          className={compact ? 'h-10 md:h-11 lg:h-12 mr-2 md:mr-3 flex-shrink-0' : 'h-12 md:h-14 lg:h-16 mr-2 md:mr-4 flex-shrink-0'}
        />

        {/* Title */}
        <h1 className="text-white text-sm md:text-lg lg:text-xl font-semibold tracking-wide line-clamp-2">
          <span className="font-bold">Pathora</span>{' '}
          <span className="text-white/90 hidden md:inline">
            | Manalife&apos;s Colposcopy Assistant
          </span>
        </h1>
      </div>
    </header>
  )
}