export default function CollectionsSuccessModal({
  isOpen,
  createdCollection,
  onViewList,
  onStay,
}) {
  if (!isOpen || !createdCollection) {
    return null;
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="card max-w-md w-full mx-4 text-center">
        <div className="text-6xl mb-4">🎉</div>
        <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
          List Created!
        </h2>
        <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
          Your list &quot;{createdCollection.name}&quot; has been created successfully.
        </p>
        <div className="space-y-3">
          <button
            type="button"
            onClick={onViewList}
            className="w-full py-2 px-4 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
            style={{
              backgroundColor: 'var(--accent-ember)',
              color: 'white',
            }}
          >
            View List
          </button>
          <button
            type="button"
            onClick={onStay}
            className="w-full py-2 px-4 rounded-xl border transition-colors"
            style={{
              borderColor: 'var(--border)',
              color: 'var(--text-secondary)',
            }}
          >
            Stay on Lists Page
          </button>
        </div>
      </div>
    </div>
  );
}