import React from 'react';
import { CalendarHeaderProps } from './types';
import { getMonthName } from './utils';

/**
 * Calendar header with navigation and view controls
 */
export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
  currentDate,
  view,
  onViewChange,
  onPreviousMonth,
  onNextMonth,
  onToday,
  isMobile
}) => {
  const displayText = isMobile 
    ? `${getMonthName(currentDate, true)} ${currentDate.getFullYear()}`
    : `${getMonthName(currentDate)} ${currentDate.getFullYear()}`;

  return (
    <div className="px-3 md:px-6 py-4" style={{ borderBottom: '1px solid var(--glass-border)' }}>
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2 md:space-x-4">
          <h2 className="text-base md:text-lg font-bold" style={{ color: 'var(--glass-text-primary)' }}>
            {displayText}
          </h2>
          <button
            onClick={onToday}
            className="text-xs md:text-sm font-semibold hover:opacity-80 transition-opacity"
            style={{ color: 'var(--glass-text-accent)' }}
          >
            Today
          </button>
        </div>
        
        <div className="flex items-center space-x-2">
          {/* View Toggle */}
          <div className="flex rounded-md shadow-sm">
            <button
              onClick={() => onViewChange('month')}
              className="px-2 md:px-3 py-1 text-xs md:text-sm font-medium rounded-l-md border transition-all hover:scale-105"
              style={{
                background: view === 'month' ? 'var(--glass-bg-elevated)' : 'var(--glass-bg-button)',
                color: view === 'month' ? 'var(--glass-text-accent)' : 'var(--glass-text-secondary)',
                borderColor: 'var(--glass-border)'
              }}
            >
              {isMobile ? 'M' : 'Month'}
            </button>
            <button
              onClick={() => onViewChange('week')}
              className="px-2 md:px-3 py-1 text-xs md:text-sm font-medium border-t border-r border-b transition-all hover:scale-105"
              style={{
                background: view === 'week' ? 'var(--glass-bg-elevated)' : 'var(--glass-bg-button)',
                color: view === 'week' ? 'var(--glass-text-accent)' : 'var(--glass-text-secondary)',
                borderColor: 'var(--glass-border)'
              }}
            >
              {isMobile ? 'W' : 'Week'}
            </button>
            <button
              onClick={() => onViewChange('list')}
              className="px-2 md:px-3 py-1 text-xs md:text-sm font-medium rounded-r-md border-t border-r border-b transition-all hover:scale-105"
              style={{
                background: view === 'list' ? 'var(--glass-bg-elevated)' : 'var(--glass-bg-button)',
                color: view === 'list' ? 'var(--glass-text-accent)' : 'var(--glass-text-secondary)',
                borderColor: 'var(--glass-border)'
              }}
            >
              {isMobile ? 'L' : 'List'}
            </button>
          </div>

          {/* Navigation */}
          <div className="flex items-center space-x-1">
            <button
              onClick={onPreviousMonth}
              className="p-1 rounded-md hover:scale-110 transition-all"
              style={{ background: 'var(--glass-bg-button)', border: '1px solid var(--glass-border)' }}
              aria-label="Previous month"
            >
              <svg className="h-4 w-4 md:h-5 md:w-5" style={{ color: 'var(--glass-text-primary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <button
              onClick={onNextMonth}
              className="p-1 rounded-md hover:scale-110 transition-all"
              style={{ background: 'var(--glass-bg-button)', border: '1px solid var(--glass-border)' }}
              aria-label="Next month"
            >
              <svg className="h-4 w-4 md:h-5 md:w-5" style={{ color: 'var(--glass-text-primary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};