punimtag/viewer-frontend/components/SignInRequiredDialog.tsx

'use client';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';

export type SignInRequiredReason = 'favorite' | 'report';

const COPY: Record<
  SignInRequiredReason,
  { description: string; detail: string }
> = {
  favorite: {
    description:
      'You need to be signed in to save favorites. Favorites stay with your account so you can find them later.',
    detail: 'Please sign in or create an account to favorite photos.',
  },
  report: {
    description:
      'You need to be signed in to report photos. Your reports will be reviewed by administrators.',
    detail: 'Please sign in or create an account to continue.',
  },
};

type SignInRequiredDialogProps = {
  open: boolean;
  reason: SignInRequiredReason;
  onOpenChange: (open: boolean) => void;
  onSignIn: () => void;
  onRegister: () => void;
};

export function SignInRequiredDialog({
  open,
  reason,
  onOpenChange,
  onSignIn,
  onRegister,
}: SignInRequiredDialogProps) {
  const copy = COPY[reason];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Sign In Required</DialogTitle>
          <DialogDescription>{copy.description}</DialogDescription>
        </DialogHeader>
        <div className="py-4">
          <p className="mb-4 text-sm text-muted-foreground">{copy.detail}</p>
          <div className="flex gap-2">
            <Button
              onClick={() => {
                onSignIn();
              }}
              className="flex-1"
            >
              Sign in
            </Button>
            <Button
              variant="outline"
              onClick={() => {
                onRegister();
              }}
              className="flex-1"
            >
              Register
            </Button>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}