<script lang="ts">
  import GoogleAuthButton from '$lib/components/GoogleAuthButton.svelte';

  let { loading, onSuccess, onError } = $props<{
    loading: boolean;
    onSuccess: () => void;
    onError: (message: string) => void;
  }>();
</script>

<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
  <div class="mb-4 flex items-center justify-between">
    <h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
    <p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
  </div>
  {#if loading}
    <div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
  {:else}
    <GoogleAuthButton 
      size="small" 
      variant="secondary"
      onSuccess={onSuccess}
      onError={onError}
    />
  {/if}
</div>
