components/Header.js

import { BookOpen, RotateCcw } from 'lucide-react'

export default function Header({ onReset }) {
  return (
    <header className="bg-white shadow-sm border-b">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <BookOpen className="h-8 w-8 text-blue-600" />
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Interactive E-Book</h1>
              <p className="text-sm text-gray-600">Transform your content into engaging experiences</p>
            </div>
          </div>
          
          <div className="flex items-center space-x-4">
            <button
              onClick={onReset}
              className="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
            >
              <RotateCcw className="h-4 w-4" />
              <span>Reset</span>
            </button>
            
            <a 
              href="https://huggingface.co/spaces/akhaliq/anycoder"
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs text-blue-600 hover:text-blue-700 hover:underline"
            >
              Built with anycoder
            </a>
          </div>
        </div>
      </div>
    </header>
  )
}