"use client";

import { Share2, QrCode, CalendarPlus } from "lucide-react";
import QRCode from "qrcode";
import { API_BASE } from "@/lib/api";

export default function ClientActions({ event }: { event: any }) {
    return (
        <div className="flex gap-2">
            <button
                onClick={async () => {
                    try {
                        await navigator.share({
                            title: event.title,
                            text: event.description,
                            url: window.location.href,
                        });
                    } catch (err) {
                        console.error("Error sharing:", err);
                    }
                }}
                className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
            >
                <Share2 className="w-4 h-4" />
                Share
            </button>
            <button
                onClick={async () => {
                    try {
                        const url = window.location.href;
                        const qrDataUrl = await QRCode.toDataURL(url);
                        const link = document.createElement("a");
                        link.href = qrDataUrl;
                        link.download = `${event.title}-qr.png`;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    } catch (err) {
                        console.error("Error generating QR code:", err);
                    }
                }}
                className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
            >
                <QrCode className="w-4 h-4" />
                Save QR
            </button>
            <a
                href={`${API_BASE}/api/events/${event.id}/ics`}
                download
                className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
            >
                <CalendarPlus className="w-4 h-4" />
                Add to calendar
            </a>
        </div>
    );
}