"use client";

import { CalendarDays } from "lucide-react";
import { COLOR_PALETTE } from "@/utils/palette";
import { format } from "date-fns";
import { es } from "date-fns/locale";

interface CalendarHeaderProps {
  selectedDate: Date;
  totalAppointments: number;
}

export function CalendarHeader({ selectedDate, totalAppointments }: CalendarHeaderProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-3 flex-1">
          <div 
            className="p-3 rounded-lg flex-shrink-0"
            style={{ backgroundColor: COLOR_PALETTE.primary[50] }}
          >
            <CalendarDays 
              className="h-6 w-6" 
              style={{ color: COLOR_PALETTE.primary[600] }}
            />
          </div>
          <div>
            <h1 
              className="text-2xl font-bold"
              style={{ color: COLOR_PALETTE.gray[900] }}
            >
              Calendario de Citas
            </h1>
            <p 
              className="text-sm mt-1"
              style={{ color: COLOR_PALETTE.gray[500] }}
            >
              Gestiona y visualiza todas tus citas médicas
            </p>
          </div>
        </div>

        <div className="flex items-center gap-4 flex-shrink-0">
          <div 
            className="text-right px-4 py-3 rounded-lg border"
            style={{ 
              backgroundColor: COLOR_PALETTE.primary[50],
              borderColor: COLOR_PALETTE.primary[200]
            }}
          >
            <div 
              className="text-2xl font-bold"
              style={{ color: COLOR_PALETTE.primary[700] }}
            >
              {totalAppointments}
            </div>
            <div 
              className="text-xs font-medium"
              style={{ color: COLOR_PALETTE.primary[600] }}
            >
              Citas del mes
            </div>
          </div>
          
          <div 
            className="text-right px-4 py-3 rounded-lg border"
            style={{ 
              backgroundColor: COLOR_PALETTE.gray[50],
              borderColor: COLOR_PALETTE.gray[200]
            }}
          >
            <div 
              className="text-sm font-semibold"
              style={{ color: COLOR_PALETTE.gray[900] }}
            >
              {format(selectedDate, "MMMM", { locale: es })}
            </div>
            <div 
              className="text-xs"
              style={{ color: COLOR_PALETTE.gray[600] }}
            >
              {format(selectedDate, "yyyy", { locale: es })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}