import React from 'react';
import { Link, useLocation } from 'react-router-dom';

export const AppHeader: React.FC = () => {
  const location = useLocation();
  
  const getPageTitle = () => {
    if (location.pathname === '/') {
      return 'Welcome to Slideshare';
    }
    if (location.pathname === '/themes') {
      return 'Theme Browser';
    }
    if (location.pathname.includes('/themes/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 3) {
        return `Theme: ${segments[2]}`;
      }
      if (segments.length === 5 && segments[3] === 'layouts') {
        return `Layout: ${segments[4]}`;
      }
    }
    return 'Slideshare';
  };

  const getPageDescription = () => {
    if (location.pathname === '/') {
      return 'Create beautiful presentations with customizable themes';
    }
    if (location.pathname === '/themes') {
      return 'Browse and select themes for your presentations';
    }
    if (location.pathname.includes('/themes/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 3) {
        return 'View theme details, layouts, and color palette';
      }
      if (segments.length === 5 && segments[3] === 'layouts') {
        return 'View layout template, slots, and configuration';
      }
    }
    return 'Slide authoring and presentation tool';
  };

  return (
    <header className="app-header">
      <nav className="app-nav">
        <Link to="/" className="app-logo">
          Home
        </Link>
        <Link to="/themes" className="app-logo">
          Slideshare
        </Link>
      </nav>
      <div className="page-title-section">
        <h1 className="page-title">{getPageTitle()}</h1>
        <p className="page-description">{getPageDescription()}</p>
      </div>
    </header>
  );
};