GRV-Summit-Site/components/event/AddToCalendar.tsx

"use client";

import { CalendarPlus, Download } from "lucide-react";
import { buildGoogleCalendarUrl, buildOutlookCalendarUrl } from "@/lib/calendar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type Props = {
  className?: string;
  variant?: "default" | "outline" | "inverse";
};

export function AddToCalendar({ className, variant = "outline" }: Props) {
  const googleUrl = buildGoogleCalendarUrl();
  const outlookUrl = buildOutlookCalendarUrl();

  const buttonClass =
    variant === "inverse"
      ? "rounded-full border-white/30 bg-transparent text-white hover:bg-white/10"
      : variant === "default"
        ? "rounded-full bg-[#37a47a] text-[#ffffff] hover:bg-[#37a47a]/90"
        : "rounded-full";

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant={variant === "default" ? "default" : "outline"} className={`${buttonClass} ${className ?? ""}`}>
          <CalendarPlus className="size-4" />
          Add to calendar
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="center" className="w-56">
        <DropdownMenuItem asChild>
          <a href={googleUrl} target="_blank" rel="noopener noreferrer">
            Google Calendar
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href={outlookUrl} target="_blank" rel="noopener noreferrer">
            Outlook
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href="/calendar" download="grv-summit.ics">
            <Download className="mr-2 size-4 inline" />
            Apple / iCal (.ics)
          </a>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}