import { CalendarPlus, Download, CalendarClock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  downloadICS,
  googleCalendarUrl,
  type CalendarEventInput,
} from '@/lib/calendar';
import { cn } from '@/lib/utils';
import { useTranslation } from '@/contexts/language';

interface AddToCalendarProps {
  event: CalendarEventInput;
  /** Accent color for the button (category color). */
  color?: string;
  className?: string;
}

/**
 * Small button that lets attendees drop a tour into their calendar of choice.
 * Offers a native .ics download (Apple/Outlook) and a Google Calendar link.
 */
export function AddToCalendar({ event, color = '#06b6d4', className }: AddToCalendarProps) {
  const { t } = useTranslation();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          className={cn('gap-2 font-bold', className)}
          style={{ borderColor: `${color}55`, color }}
        >
          <CalendarPlus className="h-4 w-4" />
          {t('placesUi.addToCalendar.add')}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-52">
        <DropdownMenuItem
          onClick={() => downloadICS(event)}
          className="cursor-pointer"
        >
          <Download className="h-4 w-4 mr-2" />
          {t('placesUi.addToCalendar.appleOutlook')}
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="cursor-pointer">
          <a
            href={googleCalendarUrl(event)}
            target="_blank"
            rel="noopener noreferrer"
          >
            <CalendarClock className="h-4 w-4 mr-2" />
            {t('placesUi.addToCalendar.google')}
          </a>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}