'use client'

import Button from './Button'

interface HeaderProps {
  onScanDirectory: () => void
}

export default function Header({ onScanDirectory }: HeaderProps) {
  return (
    <header className="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900 dark:text-white">
              Photos
            </h1>
          </div>

          <nav className="md:flex space-x-8">
            <Button
              onClick={onScanDirectory}
              variant="secondary"
              className="text-sm"
            >
              Scan Directory
            </Button>
          </nav>
        </div>
      </div>
    </header>
  )
}