import React, { useState } from 'react';

const Calendar = () => {
    const [date, setDate] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(new Date().getDate());
    const scheduledInterviews = { 15: "Interview with TechCorp" };

    const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    const monthName = date.toLocaleString('default', { month: 'long' });
    const year = date.getFullYear();

    const handlePrevMonth = () => setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
    const handleNextMonth = () => setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));

    const calendarDays = Array.from({ length: firstDayOfMonth }, (_, i) => <div key={`empty-${i}`}></div>);
    for (let day = 1; day <= daysInMonth; day++) {
        const isToday = new Date().toDateString() === new Date(date.getFullYear(), date.getMonth(), day).toDateString();
        const isSelected = day === selectedDate;
        const hasInterview = scheduledInterviews[day];

        calendarDays.push(
            <div key={day} onClick={() => setSelectedDate(day)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '40px', width: '40px', margin: 'auto', cursor: 'pointer', borderRadius: '50%', backgroundColor: isToday ? '#FBBF24' : 'transparent', border: isSelected ? '2px solid #FCD34D' : '2px solid transparent', color: isToday ? '#1a202c' : 'white', position: 'relative' }}>
                {day}
                {hasInterview && <div style={{ position: 'absolute', bottom: '5px', width: '6px', height: '6px', backgroundColor: '#FCD34D', borderRadius: '50%' }}></div>}
            </div>
        );
    }

    return (
        <div style={{ backgroundColor: 'rgba(251, 191, 36, 0.05)', borderRadius: '1rem', padding: '1.5rem', display: 'flex', gap: '2rem', flexWrap: 'wrap', border: '1px solid rgba(251, 191, 36, 0.2)' }}>
            <div style={{ flex: '1 1 300px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <button onClick={handlePrevMonth} style={{ background: 'none', border: 'none', color: 'white', cursor: 'pointer', fontSize: '1.5rem' }}>‹</button>
                    <h3 style={{ fontWeight: 'bold' }}>{monthName} {year}</h3>
                    <button onClick={handleNextMonth} style={{ background: 'none', border: 'none', color: 'white', cursor: 'pointer', fontSize: '1.5rem' }}>›</button>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', textAlign: 'center', gap: '0.5rem' }}>
                    {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => <div key={day} style={{ color: '#d1d5db', fontWeight: 'bold' }}>{day}</div>)}
                    {calendarDays}
                </div>
            </div>
            <div style={{ flex: '1 1 300px', borderLeft: '1px solid rgba(255, 255, 255, 0.2)', paddingLeft: '2rem', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <h4 style={{ fontWeight: 'bold' }}>{scheduledInterviews[selectedDate] ? `Interview on ${monthName} ${selectedDate}` : 'No interviews scheduled on this date.'}</h4>
                {scheduledInterviews[selectedDate] && <p style={{color: '#d1d5db', marginTop: '0.5rem'}}>{scheduledInterviews[selectedDate]}</p>}
            </div>
        </div>
    );
};

export default Calendar;