import React, { useState, useEffect } from 'react';
import './styles.css';

interface Calendar { id: number; name: string; description: string; email: string; timezone: string; thumbnail: string; }

export default function CalendarManager() {
  const [calendars, setCalendars] = useState<Calendar[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setCalendars([
      { id: 1, name: 'Main Calendar', description: 'Primary booking calendar', email: 'main@acuity.com', timezone: 'America/New_York', thumbnail: '📅' },
      { id: 2, name: 'Secondary Calendar', description: 'Overflow appointments', email: 'secondary@acuity.com', timezone: 'America/New_York', thumbnail: '🗓️' },
      { id: 3, name: 'Special Events', description: 'Workshops and events', email: 'events@acuity.com', timezone: 'America/New_York', thumbnail: '🎯' }
    ]);
    setLoading(false);
  }, []);

  if (loading) return <div className="loading"><div className="spinner"></div></div>;

  return (
    <div className="calendar-manager">
      <header>
        <h1>📆 Calendar Manager</h1>
        <button>➕ Add Calendar</button>
      </header>
      <div className="calendars-grid">
        {calendars.map(cal => (
          <div key={cal.id} className="calendar-card">
            <div className="calendar-icon">{cal.thumbnail}</div>
            <h3>{cal.name}</h3>
            <p className="description">{cal.description}</p>
            <div className="calendar-info">
              <div className="info-row"><span>Email:</span><span>{cal.email}</span></div>
              <div className="info-row"><span>Timezone:</span><span>{cal.timezone}</span></div>
            </div>
            <div className="calendar-actions">
              <button>✏️ Edit</button>
              <button className="danger">🗑️ Delete</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
