explore/ui/rewards/dashboard/RewardsTaskDetailsModal.tsx

import React from 'react';

import { DialogBody, DialogContent, DialogRoot, DialogHeader } from '@luxfi/ui/dialog';

type Props = {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
};

const RewardsTaskDetailsModal = ({ isOpen, onClose, title, children }: Props) => {
  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
    if (!open) {
      onClose();
    }
  }, [ onClose ]);

  return (
    <DialogRoot
      open={ isOpen }
      onOpenChange={ handleOpenChange }
      size={{ lgDown: 'full', lg: 'sm' }}
    >
      <DialogContent>
        <DialogHeader>
          { title }
        </DialogHeader>
        <DialogBody>
          <p>{ children }</p>
          <p className="text-sm text-[var(--color-text-secondary)] mt-3">
            Note: Merits are only earned on supported networks where the program is active.
          </p>
        </DialogBody>
      </DialogContent>
    </DialogRoot>
  );
};

export default RewardsTaskDetailsModal;