use yew::prelude::*;
use chrono::{NaiveDate, Datelike};
use crate::components::ViewMode;
use web_sys::MouseEvent;

#[derive(Properties, PartialEq)]
pub struct CalendarHeaderProps {
    pub current_date: NaiveDate,
    pub view_mode: ViewMode,
    pub on_prev: Callback<MouseEvent>,
    pub on_next: Callback<MouseEvent>,
    pub on_today: Callback<MouseEvent>,
}

#[function_component(CalendarHeader)]
pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
    let title = format!("{} {}", get_month_name(props.current_date.month()), props.current_date.year());

    html! {
        <div class="calendar-header">
            <button class="nav-button" onclick={props.on_prev.clone()}>{"‹"}</button>
            <h2 class="month-year">{title}</h2>
            <div class="header-right">
                <button class="today-button" onclick={props.on_today.clone()}>{"Today"}</button>
                <button class="nav-button" onclick={props.on_next.clone()}>{"›"}</button>
            </div>
        </div>
    }
}

fn get_month_name(month: u32) -> &'static str {
    match month {
        1 => "January",
        2 => "February", 
        3 => "March",
        4 => "April",
        5 => "May",
        6 => "June",
        7 => "July",
        8 => "August",
        9 => "September",
        10 => "October",
        11 => "November",
        12 => "December",
        _ => "Invalid"
    }
}