Calendar

import React, { useState, useEffect } from 'react';

interface EventData {
  title: string;
  startDate: string;
  endDate: string;
  location: string;
}

export default function MeetingExporter({ meeting }: { meeting: EventData }) {
  const [permissionGranted, setPermissionGranted] = useState(false);
  const [syncing, setSyncing] = useState(false);

  useEffect(() => {
    async function checkPerms() {
      const status = await window.easycord.calendar.checkPermission();
      setPermissionGranted(status === 'granted');
    }
    checkPerms();
  }, []);

  const exportToCalendar = async () => {
    try {
      setSyncing(true);
      if (!permissionGranted) {
        const requested = await window.easycord.calendar.requestPermission();
        if (requested !== 'granted') {
          alert('Calendar access is required to export meetings.');
          setSyncing(false);
          return;
        }
        setPermissionGranted(true);
      }

      await window.easycord.calendar.createEvent({
        title: meeting.title,
        startDate: meeting.startDate,
        endDate: meeting.endDate,
        location: meeting.location,
        notes: "Exported from EasyCord Enterprise Scheduling"
      });

      alert('Meeting successfully exported to your device calendar!');
    } catch (err) {
      alert(`Export failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
    } finally {
      setSyncing(false);
    }
  };

  return (
    <div className="border border-gray-200 p-4 rounded-md">
      <h4 className="font-bold mb-2">{meeting.title}</h4>
      <p className="text-sm text-gray-600">{new Date(meeting.startDate).toLocaleString()}</p>
      <button
        onClick={exportToCalendar}
        disabled={syncing}
        className="mt-4 bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 disabled:bg-purple-300 transition-colors"
      >
        {syncing ? 'Exporting...' : 'Add to Native Calendar'}
      </button>
    </div>
  );
}