"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { GoogleIcon } from "./GoogleIcon";
import { useCalendar } from "./CalendarContext";
import { CalendarDays, Loader2 } from "lucide-react";

export function CalendarAuth() {
  const { login, isLoading } = useCalendar();

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="text-center">
        <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
          <CalendarDays className="w-8 h-8 text-primary" />
        </div>
        <CardTitle className="text-2xl">Connect Your Calendar</CardTitle>
        <CardDescription>
          Link your Google Calendar to view upcoming events and stay organized
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Button
          onClick={() => login()}
          disabled={isLoading}
          className="w-full gap-2"
          size="lg"
        >
          {isLoading ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <GoogleIcon className="w-4 h-4" />
          )}
          {isLoading ? "Connecting..." : "Sign in with Google"}
        </Button>
        <p className="text-xs text-muted-foreground text-center mt-4">
          We only request read-only access to your calendar. Your data is stored locally on your device.
        </p>
      </CardContent>
    </Card>
  );
}